/* =========================================================================
   ProposalChat brand tokens — sourced from brand.pdf (Design guidelines /
   Colours + Typography, pages 10, 21-22).

   HOW TO WIRE THIS UP
   Load this file AFTER app.css (same <link> block, second tag). Both files
   set the same :root custom properties, so the cascade lets this file win
   without touching a single component file or class name in app.css.

     <link rel="stylesheet" href="css/app.css" />
     <link rel="stylesheet" href="css/brand.css" />

   app.css itself already says "change a value here and it ripples through
   the whole app" — this file is exactly that PM/brand handoff file, kept
   separate so future palette tweaks never require touching component CSS.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------------
       Raw brand palette (verbatim from brand.pdf, p.10)
       --------------------------------------------------------------------- */

    /* Corporate colours — the two "hero" brand colours */
    --brand-teal: #053747;   /* R5 G55 B71 · C100 M62 Y45 K43 · Pantone 3035C */
    --brand-aqua: #22c3bb;   /* R34 G195 B187 · C68 M0 Y35 K0 */

    /* Core colours — supporting palette, per the guide: "used to highlight
       key definitions, quotes or statistics" (tints from 80% down to 20%,
       in 20% steps — see the color-mix() note at the bottom of this file) */
    --brand-deep-green: #008375;
    --brand-deep-red: #b90a67;
    --brand-deep-blue: #226ca6;
    --brand-yellow: #fecd21;
    --brand-light-green: #afca0a;
    --brand-pink: #ed6d8a;      /* corrected, see note below */
    --brand-turquoise: #00adc2;
    --brand-deep-purple: #7c4e92; /* corrected, see note below */
    --brand-light-blue: #84c9f0;
    --brand-red: #e83c4e;

    /* Neutrals */
    --brand-graphite: #595858;
    --brand-mid-grey: #7d7f80;
    --brand-silver: #c8c8c7;

    /* ---------------------------------------------------------------------
       Semantic overrides — same variable names app.css already defines.
       This is the block that actually re-themes the app.
       --------------------------------------------------------------------- */

    /* Brand / accent */
    --color-primary: var(--brand-teal);
    --color-primary-hover: color-mix(in srgb, var(--brand-teal) 80%, var(--brand-aqua) 20%);
    --color-primary-soft: color-mix(in srgb, var(--brand-aqua) 12%, white);

    /* Status */
    --color-success: var(--brand-deep-green);
    --color-success-soft: color-mix(in srgb, var(--brand-deep-green) 10%, white);

    --color-danger: var(--brand-red);
    --color-danger-soft: color-mix(in srgb, var(--brand-red) 10%, white);

    /* Yellow itself is too light to use as text (fails WCAG contrast on a
       pale background), so --color-warning is a darkened ink derived from
       it for text/icons. Use --brand-yellow directly for solid fills
       (e.g. a badge background) where it sits behind dark text instead. */
    --color-warning: #8a6d00;
    --color-warning-soft: color-mix(in srgb, var(--brand-yellow) 12%, white);

    --color-info: var(--brand-deep-blue);
    --color-info-soft: color-mix(in srgb, var(--brand-deep-blue) 10%, white);

    --color-neutral: var(--brand-mid-grey);
    --color-neutral-soft: color-mix(in srgb, var(--brand-mid-grey) 10%, white);

    /* ---------------------------------------------------------------------
       Extra accents — the core-colour swatches not already used above.
       Good fit for anything that needs several distinct, on-brand hues:
       keyword chips, industry tags, a future chart/legend, etc.
       --------------------------------------------------------------------- */
    --brand-accent-1: var(--brand-turquoise);
    --brand-accent-2: var(--brand-deep-purple);
    --brand-accent-3: var(--brand-light-blue);
    --brand-accent-4: var(--brand-light-green);
    --brand-accent-5: var(--brand-pink);
    --brand-accent-6: var(--brand-deep-red);

    /* ---------------------------------------------------------------------
       Typography — brand.pdf p.21-22: Helvetica Neue LT is the print
       headline font; Arial is the named substitute for "digital,
       PowerPoint and Word." Helvetica Neue isn't a licensed web font here,
       so Arial leads the stack (that's the brand-correct choice for a
       browser app, not a compromise).
       --------------------------------------------------------------------- */
    --font-sans: Arial, "Helvetica Neue", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   Notes for whoever owns the brand.pdf source file

   1. Pink and Deep purple: the guide's printed hex (#ED6DB4 / #7C4EC3)
      doesn't match either color's own printed RGB values or the actual
      rendered swatch fill on that page (verified by sampling the swatch
      pixels directly). The RGB values and the swatch renders agree with
      each other in both cases, so the hex text looks like a typo:
        Pink:        RGB 237/109/138  ->  #ed6d8a  (guide prints #ED6DB4)
        Deep purple: RGB ~124/79/146  ->  #7c4e92  (guide prints #7C4EC3)
      This file uses the corrected values. Worth a quick check with
      whoever maintains the guide before this ships anywhere print-facing.

   2. Tints: brand.pdf specifies 80/60/40/20% tints in 20% steps, "never
      less than 20%." Rather than pre-baking 13 colors × 4 tints as static
      variables, use color-mix() on demand, e.g.:
        background: color-mix(in srgb, var(--brand-yellow) 60%, white);
      That's the same math the guide describes and needs no extra tokens.
   ========================================================================= */