/**
 * tokens.css — the product's design tokens, defined once.
 *
 * **One definition, three consumers.** Bridge (`css/style.css`), the Customer
 * Portal shell and My Portal all read these. They used to restate them: the
 * customer shell carried a copied block with a comment saying so, and My Portal
 * had a third copy inline in Python. A palette written three times is a palette
 * that disagrees, and it did.
 *
 * **Two greens, and that is not a mistake.** `--brand-chrome` is the vendor
 * theme's primary, compiled into `assets/vendor/css/theme-default.css` from
 * `scss/theme-default.scss` ($primary-color) and used by the navigation, the
 * buttons and the rest of the Sneat shell. `--brand` is the application's own
 * component green, used by everything written for this product. They are
 * different values because they always have been; naming both here is what
 * makes that visible rather than looking like drift.
 *
 * Every value below is the value that was already shipping. This file changed
 * where a token is defined, never what it renders.
 *
 * Load it BEFORE any stylesheet that consumes it. `css/style.css` and both site
 * shells assume it is present.
 */

:root {
    /* ── Brand ───────────────────────────────────────────────────────── */
    /* The vendor theme's primary: nav, buttons, the Sneat chrome. */
    --brand-chrome:        #2B8B3D;
    /* The application's component green. */
    --brand:               #43a047;
    --brand-dark:          #2e7d32;
    /* The customer portal's green: the rail, and every piece of green text on
       it. A third green, and deliberate. The vendor chrome reads too bright as
       a large flat field beside white content, and --brand-dark is the employee
       product's component colour, which this surface must be free to move
       without dragging Bridge with it.

       **Named for what it is, not where it started.** It was --brand-rail while
       the rail was its only consumer; the figures, links and tabs read it now
       too, and a name that says "rail" would send the next person looking for a
       second token that does not exist. */
    --brand-deep:          #2E7C46;
    /* The green a FIELD is painted in, under white text: the portal's rail
       and its filled buttons. The same value as --brand-deep in light mode;
       in dark mode --brand-deep turns light so it can be read as text on a
       dark page, and this one stays deep so white text on it still reads. */
    --brand-surface:       #2E7C46;
    --brand-light:         rgba(67,160,71,.1);
    --brand-extra-light:   rgba(67,160,71,.05);

    /* ── Semantic ────────────────────────────────────────────────────── */
    --teal:                #00897b;
    --teal-light:          #e0f2f1;
    --amber:               #ef6c00;
    --amber-light:         #fff3e0;
    --amber-ink:           #8a5300;
    --amber-line:          #f0d5ab;
    --red:                 #d32f2f;
    --red-light:           #ffebee;
    --slate:               #546e7a;
    --slate-light:         #eceff1;
    /* Text-weight inks for a pill on its light ground: the plain --teal and a
       yellow on their pale grounds fall below 4.5:1 at pill size. */
    --teal-ink:            #00695c;
    --pink:                #c2185b;
    --pink-light:          #fce4ec;
    --yellow-ink:          #7a5f00;
    --yellow-light:        #fff8d6;
    --blue:                #1565c0;
    --blue-light:          #e3f2fd;

    /* ── Surfaces ────────────────────────────────────────────────────── */
    --surface:             #ffffff;
    --surface-muted:       #f6f8f6;
    --surface-hover:       #e8f5e9;

    /* ── Borders ─────────────────────────────────────────────────────── */
    --border:              #dce5dc;
    --border-hover:        #c9d0db;

    /* ── Text ────────────────────────────────────────────────────────── */
    --text-primary:        #1b2e1c;
    /* Large numerals only: a balance, a count, the figure a page exists to
       show. Darker than --text-primary because a figure at 2rem carries
       weight that body text does not, and because it is read as a value
       rather than as prose. Not a brand green: it is nearly black, and
       using --brand-deep here made every headline number look like a
       link. */
    --text-figure:         #16211A;
    --text-secondary:      #5f7461;
    --text-muted:          #546e7a;
    /* Legible on the brand-chrome ground without being pure white. */
    --text-on-brand:       #dff0e3;

    /* ── Radii ───────────────────────────────────────────────────────── */
    --radius:              .75rem;
    --radius-sm:           .45rem;

    /* ── Shadows ─────────────────────────────────────────────────────── */
    --shadow-xs:           0 1px 3px rgba(0,0,0,.05);
    --shadow-sm:           0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    --shadow:              0 2px 12px rgba(0,0,0,.1);

    /* ── Overlays on a dark ground ───────────────────────────────────── */
    --wash-strong:         rgba(255,255,255,.18);
    --wash-soft:           rgba(255,255,255,.08);

    /* ── Legacy aliases ──────────────────────────────────────────────── */
    /* Kept because `css/style.css` and several templates still read these
       names. They are aliases, not second definitions: each points at the
       token above it. */
    --primary-green:              #43a047;
    --primary-green-light:        rgba(67,160,71,.1);
    --primary-green-extra-light:  rgba(67,160,71,.05);
    --primary-green-dark:         #2e7d32;
    --border-color:               #dce5dc;
    --text-color:                 #1b2e1c;
    --bg-light:                   #f6f8f6;
    --bg-lighter:                 #eceff1;
}

/* ── Dark mode ───────────────────────────────────────────────────────────
   The SAME names with dark values, switched by `data-color-mode="dark"` on
   <html>. One palette, two value sets: a shell opts in by setting the
   attribute, so nothing that has not opted in can change. Projects and the
   Customer Portal opt in, through `js/color-mode.js`; Bridge's vendor theme
   and hard-coded colours must be dealt with before it can follow. Not
   `data-theme`, which the vendor template uses.

   **Screen only.** A printed page is always light: the portal's payment page
   is the customer's receipt, and dark ink costs nothing on paper. */
@media screen {
:root[data-color-mode="dark"] {
    color-scheme: dark;
    --brand:               #5cb860;
    --brand-dark:          #7cc97f;
    --brand-deep:          #6fbf73;
    --brand-surface:       #1f4d2e;
    --brand-light:         rgba(92,184,96,.16);
    --brand-extra-light:   rgba(92,184,96,.08);

    --teal:                #4db6ac;
    --teal-light:          rgba(77,182,172,.16);
    --teal-ink:            #80cbc4;
    --amber:               #ffa726;
    --amber-light:         rgba(255,167,38,.14);
    --amber-ink:           #ffcc80;
    --amber-line:          #6b4f22;
    --red:                 #ef5350;
    --red-light:           rgba(239,83,80,.16);
    --slate:               #b0bec5;
    --slate-light:         rgba(176,190,197,.14);
    --pink:                #f48fb1;
    --pink-light:          rgba(244,143,177,.16);
    --yellow-ink:          #ffe082;
    --yellow-light:        rgba(255,224,130,.14);
    --blue:                #90caf9;
    --blue-light:          rgba(144,202,249,.16);

    --surface:             #1e1f21;
    --surface-muted:       #161718;
    --surface-hover:       #2a2b2e;
    --border:              #34363a;
    --border-hover:        #4a4c50;

    --text-primary:        #f1f1f2;
    --text-figure:         #ffffff;
    --text-secondary:      #b4b6ba;
    --text-muted:          #9ea2a8;
    --text-on-brand:       #e6f4e8;

    --shadow-xs:           0 1px 3px rgba(0,0,0,.4);
    --shadow-sm:           0 1px 4px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
    --shadow:              0 2px 12px rgba(0,0,0,.5);

    --primary-green:              #5cb860;
    --primary-green-light:        rgba(92,184,96,.16);
    --primary-green-extra-light:  rgba(92,184,96,.08);
    --primary-green-dark:         #7cc97f;
    --border-color:               #34363a;
    --text-color:                 #f1f1f2;
    --bg-light:                   #161718;
    --bg-lighter:                 #2a2b2e;
}
}