/* ============================================================================
   AGC Quarry ERP — Design Tokens
   Source: the AGC Brand Portal (portal.html, brand system v2.1, 2026-02-22).
   Palette: #191e2b #23aa08 #46b82e #536877 #c5c7c4 #edece5 #ce272d · Inter.
   The portal's component CSS also defines the concrete surfaces used below
   (canvas #eae9e3, body text #3f3c39, card border #e8e7e3, row line #f0f0ec,
   layered card shadows, 6/12px radii) — semantic tokens now mirror those
   real portal values instead of invented approximations.
   ============================================================================ */

:root {
  /* --- Brand primitives (exact, from portal) --- */
  --agc-dark:        #191e2b; /* primary dark — text, headers, sidebar */
  --agc-green:       #23aa08; /* primary accent — CTAs, logos, highlights */
  --agc-green-2:     #46b82e; /* secondary green — hover states */
  --agc-slate:       #536877; /* muted/secondary text */
  --agc-grey:        #c5c7c4; /* borders, dividers, disabled */
  --agc-offwhite:    #edece5; /* background surfaces, cards */
  --agc-red:         #ce272d; /* error / alert */

  /* --- Portal component values (from portal.html CSS) --- */
  --agc-dark-90:     #2a3244; /* dark hover (portal btn-print hover) */
  --agc-canvas:      #eae9e3; /* portal page canvas */
  --agc-text-body:   #3f3c39; /* portal long-form/body text */
  --agc-green-deep:  #147006; /* portal deep green (gradients, text on tint) */
  --agc-green-tint:  #e8f7e5; /* portal btn-row-add background */
  --agc-red-tint:    #fbe7e8;
  --agc-amber:       #d98a00; /* warning — not in brand, added for state (derived) */
  --agc-amber-tint:  #fbf1df;

  /* --- Semantic roles --- */
  --color-bg:            var(--agc-canvas);
  --color-surface:       #ffffff;
  --color-surface-alt:   #f8f8f6;   /* portal totals-box / hint surfaces */
  --color-text:          var(--agc-dark);
  --color-text-body:     var(--agc-text-body);
  --color-text-muted:    var(--agc-slate);
  --color-border:        #e8e7e3;   /* portal card/table border */
  --color-border-row:    #f0f0ec;   /* portal row divider */
  --color-primary:       var(--agc-green);
  --color-primary-hover: var(--agc-green-2);
  --color-on-primary:    #ffffff;

  --color-success:       var(--agc-green);
  --color-success-bg:    var(--agc-green-tint);
  --color-warning:       var(--agc-amber);
  --color-warning-bg:    var(--agc-amber-tint);
  --color-danger:        var(--agc-red);
  --color-danger-bg:     var(--agc-red-tint);

  /* Audit/chatter highlight — BRD 6.1.2 requires by-product changes in red */
  --color-audit-flag:    var(--agc-red);

  /* --- Typography (portal) --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading-weight: 800;   /* portal: headings 800–900 */
  --font-body-weight:    400;   /* portal: body 300–400 */
  --tracking-heading: -0.02em;  /* portal: headings -0.02em */
  --tracking-label:    0.12em;  /* portal micro-labels: +0.1 to +0.3em */

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  /* --- Radius / shadow / spacing (portal card + table values) --- */
  /* Radii step in 4s. The stylesheets had drifted to seventeen values between
     2px and 20px — 6, 7, 8 and 9 all appearing on controls that sit next to
     each other, which reads as wobble rather than as a decision. */
  --radius-sm: 4px;   /* chips, keycaps, swatches */
  --radius:    8px;   /* controls: buttons, inputs, tiles */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* raised panels */
  --radius-2xl: 20px; /* the hero surface */
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.14);
  --gradient-chrome: linear-gradient(180deg, #191e2b, #161b27);
  --gradient-accent: linear-gradient(90deg, #23aa08, #46b82e, #23aa08);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* --- Resolved neutrals ---------------------------------------------------
     app.css and preview-theme.css had each grown their own greys: ten separate
     shades of the same hairline border, and twenty-five of the same muted
     label text. The differences were never visible — a couple of points per
     channel — so they read as one colour on screen while behaving as many in
     the code, and every new rule picked whichever neighbour it was copied from.
     These are the surviving values, one per tier. Use them rather than a hex.
     --------------------------------------------------------------------- */
  --ui-line:        #daddd7; /* hairline on light surfaces */
  --ui-line-soft:   #e8e9e5; /* the lighter hairline: row dividers, insets */
  --ui-line-dark:   #31394a; /* hairline on the dark chrome */
  --ui-line-darker: #232a38; /* the dark chrome's own inner edges */

  --ui-ink-muted:   #536877; /* muted body text — same value as --agc-slate */
  --ui-ink-soft:    #627080; /* micro-labels on light surfaces */
  --ui-ink-dim:     #646e79; /* secondary label text — also used on grey chips */
  --ui-ink-faint:   #66707b; /* the faintest label still readable on an inset */
  --ui-ink-ghost:   #98a4ad; /* de-emphasised text on the dark chrome */
  --ui-ink-mist:    #8b97a5; /* keyline/kbd text on the dark chrome */

  /* --- The accent, as channels ---------------------------------------------
     Tints of the accent were written as literal rgba(35,170,8,…) in a dozen
     rules, which pinned them to AGC green while var(--agc-green) followed the
     subsidiary theme — the same control would have ended up teal with a green
     glow. Compose tints as rgba(var(--accent-rgb), …) so they move together.
     ---------------------------------------------------------------------- */
  --accent-rgb:   35, 170, 8;
  --accent-2-rgb: 70, 184, 46;

  /* --- Inks: the same colours, at the weight text needs ----------------------
     A brand colour chosen for a logo is not automatically a colour you can set
     text in. #23aa08 carrying white text is 3.1:1, and the same green as text
     on white is 3.1:1 the other way — both fail AA at every size the buttons,
     the stepper and the receipt ticks actually use, which was every primary
     action in the app. #d98a00 on white is 2.8:1, worse.

     So each of the three states keeps its brand value for fills, borders and
     tints, and gains an ink for the times it has to be read. The greens pass
     both ways round at 5.3:1, which is why there is one of them and not two.
     ---------------------------------------------------------------------- */
  --accent-ink: #1a7d05; /* white on it, or it on white */
  --amber-ink:  #8f5c00;
  --danger-ink: #b81f24;

  /* --- The chrome (sidebar + slide-in nav) ---------------------------------
     Its ink was hard-coded white on the assumption the chrome is always dark.
     Sun Electronics is a white house style, so the chrome's own colours are
     tokens the theme can invert. Defaults below are the dark chrome as shipped.
     ---------------------------------------------------------------------- */
  --chrome-ink:       #ffffff; /* brand name, active nav, account name */
  --chrome-ink-muted: var(--agc-slate); /* resting nav items, sub-labels */
  --chrome-ink-hover: var(--agc-grey);  /* nav hover */
  --chrome-section:   #3a4353; /* nav section headings */
  --chrome-line:      var(--ui-line-dark);   /* borders on the chrome */
  --chrome-line-soft: var(--ui-line-darker); /* its inner dividers */
  --chrome-hover-bg:  rgba(255, 255, 255, 0.03);
  --chrome-sunk-bg:   rgba(255, 255, 255, 0.06); /* inset controls (the switch) */
  --chrome-raised-bg: rgba(255, 255, 255, 0.11); /* the selected row inside one */
  --chrome-accent-ink: var(--agc-green-2); /* accent text on the chrome */
  --chrome-close-bg:  #202735; /* mobile close button */
  --chrome-edge:      transparent; /* right edge — only a light chrome needs one */
  /* The square of white a subsidiary's logo sits on. A real colour rather
     than a literal, so the chrome guard in the tests stays absolute: nothing
     in the sidebar is written as #fff. */
  --logo-plate:       #ffffff;
}

/* ============================================================================
   SUBSIDIARY THEMES
   Paymaster serves two AGC subsidiaries. Egle uses the green command palette
   and Sun uses the teal command palette approved in the interactive preview.
   `base.html` puts `theme-<slug>` on the body, so each house style is a block
   of token overrides here and nothing else — and a theme must
   restate every token it moves, including the ones declared as aliases above
   (`--chrome-line: var(--ui-line-dark)`). An alias is substituted where it is
   *declared*, on :root, so re-pointing the value it referenced from `body`
   leaves the alias holding the root colour.
   ============================================================================ */

body.theme-egle {
  --agc-green: #25a744;
  --agc-green-2: #5cdb78;
  --agc-green-deep: #126929;
  --agc-green-tint: #e0f4e5;
  --color-primary: #25a744;
  --color-primary-hover: #5cdb78;
  --color-success: #25a744;
  --color-success-bg: #e0f4e5;
  --accent-rgb: 37, 167, 68;
  --accent-2-rgb: 92, 219, 120;
  --chrome-accent-ink: #8beb9f;
  --preview-green: #25a744;
  --preview-green-dark: #8beb9f;
  --preview-green-pale: #173c22;
  --preview-green-rgb: 37, 167, 68;
}

body.theme-sun {
  --agc-green: #119b97;
  --agc-green-2: #53d8d1;
  --agc-green-deep: #08716e;
  --agc-green-tint: #dcf3f1;
  --color-primary: #119b97;
  --color-primary-hover: #53d8d1;
  --color-success: #119b97;
  --color-success-bg: #dcf3f1;
  --accent-rgb: 17, 155, 151;
  --accent-2-rgb: 83, 216, 209;
  --chrome-accent-ink: #8ce9e4;
  --preview-green: #119b97;
  --preview-green-dark: #8ce9e4;
  --preview-green-pale: #103b38;
  --preview-green-rgb: 17, 155, 151;
}