/* ============================================================================
   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;
  /* A link that is only a link — not a button, a row or a nav item. Nothing
     set one, so those fell through to the browser's #0000EE, which on the
     command centre's near-black canvas is 1.79:1. The deep green reads on the
     light surfaces this sheet describes; the skin re-points it for the dark. */
  --color-link:          var(--agc-green-deep);
  --color-link-hover:    var(--agc-green);

  --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;
  /* Page titles only. See the @font-face note in app.css for why they are
     not set in the body face. */
  --font-display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", 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: 6px;   /* chips, keycaps, swatches */
  --radius:    10px;  /* controls: buttons, inputs, tiles */
  --radius-lg: 13px;  /* cards */
  --radius-xl: 17px;  /* 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 */
  /* These two are for text ON THE DARK CHROME, and only there — on a white
     surface they are 2.5:1 and 2.9:1. Both are set to clear AA against the
     sidebar's lightest stop (#2a313d), which is the raised row inside the
     working-company switch. */
  --ui-ink-ghost:   #a3aeb8; /* de-emphasised text on the dark chrome */
  --ui-ink-mist:    #98a4ad; /* 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 */
  --accent-deep: #147006;
  --accent-soft: #e8f7e5;
  --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(--ui-ink-ghost); /* resting nav items, sub-labels */
  --chrome-ink-hover: var(--agc-grey);  /* nav hover */
  --chrome-section:   var(--ui-ink-mist); /* nav section headings, trail separators */
  --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 {
  /* The accent as TEXT on a light surface. --agc-green carries white; this is
     the end of the same ramp you can read.
     --accent-ink is the same value in its other job: the FILL that carries
     white — an avatar, the selected filter, a completed step. Stated per theme
     or it holds AGC green, and Sun's teal page grows a green avatar on it. */
  --accent-deep: #126929;
  --accent-ink: #126929;
  /* The tint the accent is read on, both ways round: a pale wash on a light
     page, a deep one on a dark page. Stated per theme because it is a mix of
     the company's own accent, not a neutral. */
  --accent-soft: #e0f4e5;
  --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;
  /* "the accent you read" and "the tint you read it on". Both were fixed at
     the dark-scheme end, so on a light page a stage count came out mint on
     white at 1.45:1. They follow the scheme now, like the accent itself. */
  --preview-green-dark: var(--accent-deep);
  --preview-green-pale: var(--accent-soft);
  --preview-green-rgb: 37, 167, 68;
}

body.theme-sun {
  --accent-deep: #08716e;
  --accent-ink: #08716e;
  --accent-soft: #dcf3f1;
  --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: var(--accent-deep);
  --preview-green-pale: var(--accent-soft);
  --preview-green-rgb: 17, 155, 151;
}