/* ============================================================================
 * colors.css — the single source of colour truth for the SilverBox web app.
 *
 * This is the web counterpart of Android's
 *   tarka-ui/src/main/java/com/eam360/tarkaui/theme/Color.kt
 * where `defaultLightColors` / `defaultDarkColors` do the same job. Token names
 * below deliberately mirror the Kotlin ones (primary/onPrimary/surface/
 * onSurface/surfaceVariant/utilityOutline/...) so the two platforms can be
 * diffed by eye.
 *
 * ---------------------------------------------------------------------------
 * HOW TO CHANGE A COLOUR
 *   Edit it HERE and nowhere else. Every stylesheet and page reads these
 *   variables, so one edit repaints the whole site in both modes.
 *
 * HOW THE TWO MODES ARE SELECTED
 *   :root                      -> light (the default)
 *   :root[data-theme="dark"]   -> dark
 *   :root[data-theme="light"]  -> light, even if the OS prefers dark
 *
 *   The <html data-theme="..."> attribute is set by assets/js/theme.js, from
 *   the drawer's toggle and localStorage. Android follows the OS setting only
 *   (TUITheme(darkTheme = isSystemInDarkTheme())); the web additionally gives
 *   the user a manual switch, because desktop browsers are often left on the
 *   system default regardless of what the person actually wants.
 *
 *   A visitor who has never touched the switch now follows their OS setting,
 *   matching Android (TUITheme reads isSystemInDarkTheme()). A saved choice
 *   still wins over the OS. That selection lives in theme.js, not in an @media
 *   block here — see the comment at the top of that file for why.
 *
 * LIGHT vs DARK VALUES — where they come from
 *   Dark values are ported from Android's `defaultDarkColors`, so dark mode
 *   matches the app rather than being invented here.
 *
 *   Light values are whichever shade the majority of screens already used, so
 *   most of the site is unchanged. It is NOT unchanged everywhere: the sweep
 *   consolidated shades that were doing the same job, which moved ~90 of 803
 *   uses by a visible amount. The largest were #24c5a1 -> --primary (the mint
 *   accent on settings/checkout/deliveryAddress, 27 uses) and #e74c3c ->
 *   --error (11 uses). That consolidation is the point of the file — one
 *   red, one green — but it does mean those screens look slightly different.
 * ========================================================================= */

:root {

  /* ==========================================================================
   * BRAND
   * ======================================================================= */

  /* The SilverBox green. The most-used colour on the site (~128 places):
   * links, active tabs, focused input borders, filled primary buttons,
   * section icons, the drawer's selected item.
   * Android: defaultLightColors.primary = 0xFF0B6B52 */
  --primary: #0B6B52;

  /* Text/icons placed ON --primary (filled buttons, selected tabs).
   * Android: onPrimary */
  --on-primary: #F2FBF7;

  /* Muted green fill for emphasis that must not shout: the drawer's selected
   * row, badge pills. Android: primaryAlt */
  --primary-alt: #D3EAE1;

  /* Text/icons on --primary-alt. Android: onPrimaryAlt */
  --on-primary-alt: #06402F;

  /* The lightest green wash — Staff Panel role badges, the "refresh" buttons
   * on admin list screens, subtle callouts. (Web-specific; Android achieves
   * this with primaryAlt at a lower elevation.) */
  --primary-container: #EEF3F1;

  /* Green-tinted border, used where a plain grey border would lose the
   * relationship to a green element it sits beside. */
  --primary-border: #CFE0DA;

  /* Gold. Reserved for price/value emphasis and premium accents.
   * Android: secondary = 0xFFB3924D */
  --secondary: #B3924D;

  /* ==========================================================================
   * SURFACES  (largest area first: background -> surface -> variant)
   * ======================================================================= */

  /* The page itself — <body>. */
  --background: #FFFFFF;

  /* Text/icons directly on --background. */
  --on-background: #1F2A24;

  /* Raised containers: cards, the drawer, the sticky header, modals, popovers.
   * Android: surface */
  --surface: #FFFFFF;

  /* Primary text on a card: headings, values, table cells. ~65 places.
   * Android: onSurface */
  --on-surface: #1F2A24;

  /* Secondary text: card subtitles, helper text, timestamps, table labels.
   * ~32 places. */
  --on-surface-variant: #6B7772;

  /* Tertiary text: placeholders, disabled-looking hints, empty-state copy.
   * ~15 places. */
  --on-surface-dim: #9AA4A0;

  /* Inset fill — a panel sitting INSIDE a card: list rows on the admin
   * screens, order summary blocks, the deal-console cards.
   * Android: surfaceVariant */
  --surface-variant: #F4F7F5;

  /* Hover fill for rows and clickable cards. Android: surfaceHover */
  --surface-hover: #F0F2F5;

  /* ==========================================================================
   * BORDERS
   * ======================================================================= */

  /* The default border: inputs, cards, buttons. ~26 places. */
  --outline: #D8DED9;

  /* Lighter separator: dividers between list rows, <hr>, card inner rules.
   * ~20 places. */
  --outline-variant: #E6EBE8;

  /* Form-control outline that must hold its own in both modes — Android keeps
   * this identical light and dark. Android: utilityOutline */
  --utility-outline: #878B92;

  /* ==========================================================================
   * STATE  (success / error / warning)
   * ======================================================================= */

  /* Approved, delivered, paid, in-stock. Android: success */
  --success: #148F47;
  --on-success: #F2FDF6;

  /* Rejected, failed, destructive buttons, validation messages.
   * Android: error = 0xFFCD1D32 */
  --error: #CD1D32;
  --on-error: #FEFBFB;

  /* Pending, awaiting approval, low stock. Android: warning */
  --warning: #FFB938;
  --on-warning: #241D0F;

  /* ==========================================================================
   * FORM INPUTS
   * ======================================================================= */

  /* Android: inputBackground */
  --input-bg: #FFFFFF;

  /* What the user has typed — deliberately darker than --on-surface so the
   * typed value reads as the strongest thing in the field. Android: inputText */
  --input-text: #111111;

  /* Placeholder text and unit suffixes. Android: inputDim */
  --input-dim: #9AA4A0;

  /* ==========================================================================
   * UTILITY
   * ======================================================================= */

  /* Inline hyperlinks in body copy, distinct from the green brand actions.
   * Android: utilityLink */
  --link: #3381FF;

  /* Android: utilityDisabledContent / utilityDisabledBackground */
  --disabled-content: rgba(26, 27, 31, 0.38);
  --disabled-bg: rgba(26, 27, 31, 0.06);

  /* Never flip with the theme — for text on a photo, or on a coloured chip
   * that is itself constant. Android: constantLight / constantDark */
  --constant-light: #FFFFFF;
  --constant-dark: #000000;

  /* ==========================================================================
   * EFFECTS  (rings, shadows, scrims)
   * ======================================================================= */

  /* The 3px halo on a focused input. ~15 places. */
  --focus-ring: rgba(11, 107, 82, 0.10);

  /* Resting card shadow. */
  --shadow-color: rgba(0, 0, 0, 0.05);

  /* Lifted/hover card shadow — green-tinted in light mode. */
  --shadow-hover: rgba(11, 107, 82, 0.12);

  /* The dim behind the navigation drawer and modal dialogs. */
  --overlay: rgba(0, 0, 0, 0.45);

  /* Full-screen busy scrim shown while a screen loads. Light mode veils the
     page in white; dark mode must veil it in dark, or every load flashes
     white over a dark page. */
  --scrim: rgba(255, 255, 255, 0.5);

  /* ==========================================================================
   * EXTENDED ROLES
   *
   * Added during the page sweep. Each screen had grown its own shade for the
   * same job — five reds for "destructive", five greens for "success" — so
   * these consolidate them. The light value is whichever shade the majority of
   * screens already used, so most pages do not shift at all.
   * ======================================================================= */

  /* ---- status: soft background + strong foreground pairs ----
   * Used by every status pill and banner: order states, approval outcomes,
   * validation messages. */
  --error-strong: #B3261E;      /* destructive buttons, error text (admin)   */
  --error-soft: #FDECEC;        /* error banner / rejected pill background   */
  --error-border: #F6CBC8;
  --success-strong: #0F7B3F;    /* delivered / approved text                 */
  --success-soft: #E9F7EF;      /* approved pill background                  */
  --success-border: #BFE6CD;
  --warning-strong: #B76E00;    /* pending / awaiting text                   */
  --warning-soft: #FDF1E7;      /* pending pill background                   */
  --warning-border: #FFD699;   /* amber rule around a pending/discount panel  */
  --amber: #F59E0B;             /* star ratings, highlight chips             */

  /* ---- extra surfaces ---- */
  --surface-tint: #F7FAF8;      /* faint green panel: admin + goods screens  */
  --surface-muted: #F0F0F0;     /* neutral grey panel: buyer forms           */

  /* ---- extra borders (green-tinted, two weights) ---- */
  --outline-tint: #CDD8D3;      /* inputs and cards on admin screens         */
  --outline-tint-strong: #B9C8C2;

  /* ---- gold: Quick Shopping pricing and premium chips ---- */
  --gold: #B3860B;
  --gold-deep: #8A6508;
  --gold-tint-10: rgba(179, 134, 11, 0.08);
  --gold-tint-90: rgba(179, 134, 11, 0.9);

  /* ---- brand-tinted washes ----
   * Must re-tint with the brand: in dark the brand is mint, so a green wash
   * derived from #0b6a52 would read as a muddy stain against #212731. */
  --primary-wash-05: rgba(11, 107, 82, 0.05);
  --primary-wash-08: rgba(11, 107, 82, 0.08);
  --primary-wash-12: rgba(11, 107, 82, 0.12);
  --primary-wash-25: rgba(11, 107, 82, 0.25);
  --primary-wash-35: rgba(11, 107, 82, 0.35);
  /* The Quick Shopping accent green (#13B36D) family. */
  --accent-wash-08: rgba(19, 179, 109, 0.08);
  --accent-wash-12: rgba(19, 179, 109, 0.12);
  --accent-wash-20: rgba(19, 179, 109, 0.20);

  /* ---- constants: brand colours owned by someone else ----
   * Never themed — WhatsApp green is WhatsApp's, in both modes. */
  --whatsapp: #25D366;
  /* Social sign-in buttons carry their owners' brand colours; never themed. */
  --brand-facebook: #3B5998;      --brand-facebook-hover: #344E86;
  --brand-twitter: #1DA1F2;       --brand-twitter-hover: #0D95E8;
  --brand-google: #EA4335;        --brand-google-hover: #E82E1E;


  /* ---- deliberately dark bands ----
   * A footer, hero strip, table header or dark badge: dark in LIGHT mode by
   * design, so it must NOT invert to near-white in dark mode the way the text
   * tokens do. Use this instead of --gunmetal-2/--charleston-green whenever the
   * colour is painting a surface rather than text. */
  /* A solid brand-green BAND (the home page's service strip). Unlike --primary,
     which inverts to mint for text and buttons, a full-width band must stay
     deep in dark mode or it becomes a glaring slab carrying white text. */
  --primary-band: #075440;

  --surface-inverse: #1F2A24;
  --on-surface-inverse: #FFFFFF;
  /* Body copy on that band — the footer's links and address sit at this weight,
   * not full white. Must stay LIGHT in both modes, which is exactly what the
   * old --light-gray could not do (it inverts to a dark border colour). */
  --on-surface-inverse-variant: #D1D1D1;

  /* ---- Staff Panel role badges ----
   * One pair per access flag; see admin/staffHub.html. */
  --role-owner-bg: #E7F2ED;   --role-owner-fg: #0B6B52;
  --role-staff-bg: #E8EEF6;   --role-staff-fg: #2B5A8C;
  --role-goods-bg: #FDF1E7;   --role-goods-fg: #B76E00;
  --role-vendor-bg: #F1ECF8;  --role-vendor-fg: #6B4B9A;

  /* ---- order-status pills ----
   * The other four states reuse the status pairs above (TODO -> primary,
   * IN PROGRESS -> warning, REJECTED -> error, DELIVERED -> success); these two
   * need their own hues so the six states stay tellable apart at a glance.
   * See admin/adminOrders.html. */
  --status-received-bg: #E7F0FB;   --status-received-fg: #1A63C4;
  --status-confirmed-bg: #EFE9FB;  --status-confirmed-fg: #6A3FC0;

  /* ---- contact / cart form accent ----
   * A leftover from the original form template, kept because both pages lean on
   * it for focus rings and headings. */
  --form-heading: #07074D;
  --form-accent: #6A64F1;

  /* ---- data-viz series ----
   * Slots 1 & 2 of a CVD-validated 8-hue categorical order (blue, orange, aqua,
   * yellow, magenta, green, violet, red) — never cycled or reassigned by rank,
   * per the dataviz skill. Chart chrome (grid/axis/labels) reuses the existing
   * --outline-variant / --on-surface-variant tokens above; only the marks
   * themselves need dedicated hues. See manager/analytics.html. */
  --chart-series-1: #2A78D6;
  --chart-series-2: #EB6834;
}


/* ============================================================================
 * DARK
 *
 * Values ported from Android `defaultDarkColors`. The green inverts to mint
 * (#55C9A6) because a #0B6B52 button on a #212731 card fails contrast badly —
 * the app solved this already, so the web takes the same answer.
 * ========================================================================= */

:root[data-theme="dark"] {

  /* ---- BRAND ---- */
  --primary: #55C9A6;              /* Android: darkColors.primary          */
  --on-primary: #00291D;           /* dark text on the mint fill           */
  --primary-alt: #29473D;
  --on-primary-alt: #D6F5E9;
  --primary-container: #1E2A26;    /* badge/refresh wash, mint-tinted      */
  --primary-border: #2F4A40;
  --secondary: #E0C475;            /* Android: darkColors.secondary        */

  /* ---- SURFACES ---- */
  --background: #0F1115;           /* Android: darkColors.background       */
  --on-background: #F0F2F4;
  --surface: #212731;              /* Android: darkColors.surface          */
  --on-surface: #FCFCFD;           /* Android: darkColors.onSurface        */
  --on-surface-variant: #A7B0B9;   /* muted, ~7:1 on --surface             */
  --on-surface-dim: #7E8891;
  --surface-variant: #2D3543;      /* Android: darkColors.surfaceVariant   */
  --surface-hover: #29313D;        /* Android: darkColors.surfaceHover     */

  /* ---- BORDERS ---- */
  --outline: #3A424E;
  --outline-variant: #2F3742;
  --utility-outline: #878B92;      /* unchanged by design, as on Android   */

  /* ---- STATE ---- */
  --success: #55E792;
  --on-success: #003817;
  --error: #FF8A80;        /* lightened from Android's #D42136: the web uses
                             --error as TEXT on a card, where #D42136 scored
                             2.91 contrast. The filled-button pair below still
                             works because --on-error is dark ink. */
  --on-error: #3B0A0A;
  --warning: #FFB938;              /* unchanged by design, as on Android   */
  --on-warning: #241D0F;

  /* ---- FORM INPUTS ---- */
  --input-bg: #1A1F27;             /* recessed vs --surface, not raised    */
  --input-text: #FCFCFD;
  --input-dim: #7E8891;

  /* ---- UTILITY ---- */
  --link: #80B0FF;                 /* Android: darkColors.utilityLink      */
  --disabled-content: rgba(252, 252, 253, 0.38);
  --disabled-bg: rgba(252, 252, 253, 0.12);
  /* --constant-light / --constant-dark deliberately NOT overridden. */

  /* ---- EFFECTS ---- */
  --focus-ring: rgba(85, 201, 166, 0.18);
  /* Shadows go black and deeper: on a dark surface a 5%-black shadow is
     invisible, so depth has to come from a harder scrim. */
  --shadow-color: rgba(0, 0, 0, 0.45);
  --shadow-hover: rgba(0, 0, 0, 0.55);
  --overlay: rgba(0, 0, 0, 0.65);
  --scrim: rgba(15, 17, 21, 0.6);

  /* ---- EXTENDED ROLES ----
   * Status colours invert: the soft backgrounds become deep tints of the same
   * hue, and the strong foregrounds lighten so they stay legible on them. */
  --error-strong: #F2B8B5;
  --error-soft: #3B1F1E;
  --error-border: #5C2B28;
  --success-strong: #6DDCA0;
  --success-soft: #16301F;
  --success-border: #2C5238;
  --warning-strong: #FFC46B;
  --warning-soft: #33240F;
  --warning-border: #5A431C;
  --amber: #FFC145;

  --surface-tint: #1B222C;
  --surface-muted: #262D38;

  --outline-tint: #414B58;
  --outline-tint-strong: #4A5661;

  --gold: #E0C475;              /* = Android darkColors.secondary */
  --gold-deep: #C4A85E;
  --gold-tint-10: rgba(224, 196, 117, 0.10);
  /* Stays a DEEP gold, unlike --gold: this one is a chip fill carrying white
     text (the Quick Shopping "22ct Gold" badge). Lightening it the way the
     text-gold lightens would put white on pale gold. */
  --gold-tint-90: rgba(146, 109, 9, 0.92);

  /* Washes re-tint to the mint brand so they read as a glow, not a stain. */
  --primary-wash-05: rgba(85, 201, 166, 0.07);
  --primary-wash-08: rgba(85, 201, 166, 0.10);
  --primary-wash-12: rgba(85, 201, 166, 0.15);
  --primary-wash-25: rgba(85, 201, 166, 0.28);
  --primary-wash-35: rgba(85, 201, 166, 0.38);
  --accent-wash-08: rgba(85, 201, 166, 0.10);
  --accent-wash-12: rgba(85, 201, 166, 0.15);
  --accent-wash-20: rgba(85, 201, 166, 0.24);

  /* --whatsapp deliberately NOT overridden: it is WhatsApp's colour. */

  /* Role badges: deep tinted chips with light text. */
  --role-owner-bg: #1E3A30;   --role-owner-fg: #7FD9B8;
  --role-staff-bg: #1E2A3A;   --role-staff-fg: #8FB6E0;
  --role-goods-bg: #3A2A16;   --role-goods-fg: #E5A85A;
  --role-vendor-bg: #2E2440;  --role-vendor-fg: #B79BE0;


  --primary-band: #14513F;
  --surface-inverse: #2D3543;   /* stays a band: lifted off --surface, not white */
  --on-surface-inverse: #FCFCFD;
  --on-surface-inverse-variant: #A7B0B9;

  --status-received-bg: #1E2A3A;   --status-received-fg: #8FB6E0;
  --status-confirmed-bg: #2A2440;  --status-confirmed-fg: #B79BE0;

  --form-heading: #C9D2F5;
  --form-accent: #9B96F5;

  /* ---- data-viz series ----
   * Same slots 1 & 2, stepped for the dark surface — validated as a set, not a
   * flip of the light hex. See the light block's comment for the full rule. */
  --chart-series-1: #3987E5;
  --chart-series-2: #D95926;
}


/* ============================================================================
 * LEGACY ALIASES  —  do not use these in new code.
 *
 * The site was built with colour-NAMED tokens (--white, --emerald, --platinum).
 * They cannot express a theme: "--white" resolving to #212731 is a lie, and
 * you cannot tell from the name whether a given use meant "the card colour" or
 * "constant white".
 *
 * Rather than rewrite ~618 call sites in one unreviewable commit, each old name
 * KEEPS ITS EXACT LIGHT VALUE here and gains a dark counterpart below. That
 * makes main.css, home.css and navigation-drawer.css theme-aware for free,
 * with light mode rendering pixel-for-pixel as it did before.
 *
 * They are not aliased onto the semantic tokens, deliberately: several are
 * near-duplicates that differ just enough to matter (three greens forming a
 * gradient ramp; #858993 vs #737373 vs #878787 for muted text), and collapsing
 * them would silently restyle light mode.
 *
 * When you sweep a screen, replace these with the semantic token that matches
 * the role — the comment on each line says which. This block shrinks over time.
 * ========================================================================= */

:root {
  /* ---- greens ----------------------------------------------------------
   * These are a RAMP, not three names for one colour: several screens do
   *   linear-gradient(135deg, var(--emerald), var(--shamrock-green))
   * and cart.html uses --green-pigment as the hover of an --emerald button.
   * Collapsing them onto --primary would flatten every one of those
   * gradients into a solid block and make the hover a no-op. */
  --emerald: hsl(164, 81%, 23%);          /* 156 uses: the site's main green  */
  --shamrock-green: hsl(164, 84%, 18%);   /* darker: gradient end             */
  --green-pigment: hsl(164, 82%, 21%);    /* mid: button hover                */
  --mint-cream: hsl(164, 30%, 95%);       /* 37 uses: drawer/section washes   */

  /* ---- near-blacks: primary text ---- */
  --gunmetal-1: hsl(207, 21%, 17%);
  --gunmetal-2: hsl(206, 21%, 15%);       /* 73 uses: drawer + body text      */
  --eerie-black: hsl(210, 11%, 15%);
  --charleston-green: hsl(206, 20%, 14%);
  --space-cadet: hsl(222, 36%, 22%);
  /* Deep navy, and deliberately NOT the body-text colour: it is the display
   * heading colour on policies, 404 and the home page section titles. */
  --russian-violet: hsl(245, 97%, 13%);   /* 18 uses: display headings        */
  --onyx: hsl(0, 0%, 27%);
  --jet: hsl(0, 0%, 20%);

  /* ---- greys: secondary text ---- */
  --roman-silver: hsl(223, 6%, 55%);      /* 49 uses: struck-out prices, meta */
  --sonic-silver: hsl(0, 0%, 45%);        /* 14 uses                          */
  --battleship-gray: hsl(0, 0%, 53%);
  --spanish-gray: hsl(156, 3%, 61%);
  --rhythm: hsl(220, 17%, 49%);

  /* ---- light greys: surfaces & borders ---- */
  --white: hsl(0, 0%, 100%);              /* 37 uses: card/drawer/header bg   */
  --cultured: hsl(0, 0%, 94%);
  --platinum: hsl(0, 0%, 92%);            /* 13 uses: dividers                */
  --light-gray: hsl(0, 0%, 82%);

  /* alpha utilities — these keep their literal meaning, since a caller asking
     for "black at 25%" wants a scrim, not a themed colour. */
  --black: var(--constant-dark);
  --black_90: rgba(0, 0, 0, 0.9);
  --black_50: rgba(0, 0, 0, 0.5);
  --black_25: rgba(0, 0, 0, 0.25);
  --white_50: rgba(255, 255, 255, 0.50);
  --white_25: rgba(255, 255, 255, 0.25);
  --white_10: rgba(255, 255, 255, 0.1);
  --emerald_70: hsla(164, 81%, 23%, 0.7);
  --russian-violet_65: hsla(245, 97%, 13%, 0.65);

  /* Predates the token set; it plays the role of --warning. */
  --yellow-orange: hsl(36, 100%, 50%);
}

/* Dark counterparts for the legacy names. Each mirrors the semantic token named
 * in the comment, so a screen swept onto semantic tokens looks identical to one
 * that has not been swept yet. */
:root[data-theme="dark"] {
  /* greens — the ramp is preserved, inverted to mint so it stays legible */
  --emerald: #55C9A6;                /* = --primary                          */
  --shamrock-green: #3FB893;         /* gradient end, still darker than base  */
  --green-pigment: #49C09B;          /* hover, still between the two          */
  --mint-cream: #1E2A26;             /* = --primary-container                 */

  /* near-blacks invert to near-whites */
  --gunmetal-1: #FCFCFD;             /* = --on-surface                        */
  --gunmetal-2: #FCFCFD;             /* = --on-surface                        */
  --eerie-black: #FCFCFD;            /* = --on-surface                        */
  --charleston-green: #FCFCFD;       /* = --on-surface                        */
  --space-cadet: #E3E8F0;
  --russian-violet: #C9D2F5;         /* display headings keep their blue cast */
  --onyx: #D4D9DD;
  --jet: #E1E5E8;

  /* muted greys lighten */
  --roman-silver: #A7B0B9;           /* = --on-surface-variant                */
  --sonic-silver: #A7B0B9;           /* = --on-surface-variant                */
  --battleship-gray: #A7B0B9;
  --spanish-gray: #8F9894;
  --rhythm: #9AA7C0;

  /* surfaces & borders */
  --white: #212731;                  /* = --surface                           */
  --cultured: #2D3543;               /* = --surface-variant                   */
  --platinum: #2F3742;               /* = --outline-variant                   */
  --light-gray: #3A424E;             /* = --outline                           */

  /* Shadows and scrims need re-tinting; a 25%-black shadow vanishes on dark. */
  --black_25: rgba(0, 0, 0, 0.55);
  --emerald_70: rgba(85, 201, 166, 0.7);
  --yellow-orange: var(--warning);
}