/* ============================================================================
   theme.css — the single source of truth for design tokens.

   Layer 1  raw palette            fixed brand values, never consumed directly
   Layer 2  editor-overridable     names Site Settings writes; DO NOT RENAME
   Layer 3  semantic tokens        the ONLY layer page CSS may consume

   Fixed-surface exception: a handful of page sections are branded moments
   that must render identically in light and dark mode (e.g. the Home hero,
   which is always a dark diagonal split, and the CTA/services/proof cards,
   which are always brand-green). Page CSS may consume the fixed-surface
   tokens below (--on-dark, --on-dark-strong, --surface-brand, --on-brand)
   for exactly those surfaces. It must not reach past them into raw Layer 1
   palette values (--green-*, --ink, --paper, --line, ...) except for the
   literal construction of the fixed surface's own background/gradient
   itself, which has no semantic name to migrate to.

   No other stylesheet may declare :root or a body.dark-mode colour rule.
   ========================================================================= */

:root {
  /* --- Layer 1: raw palette ------------------------------------------- */
  --green-950: #14260f;
  --green-900: #233b16;
  --green-800: #175d2f;
  --green-700: #1a8740;
  --green-600: #229b49;
  --green-500: #40ad5e;
  --green-300: #9fd8a9;
  --green-100: #eaf5e8;
  --green-050: #f4faf2;
  /* Blue is deliberately NOT a brand colour. It exists for exactly one
     surface — the Case Studies index hero, which the design source renders
     blue to set "selected work" apart from the green marketing pages (see
     package/styles.css .software-hero.case-study). Values are that source's
     own stops. Do not reach for these for anything else without a design
     decision; the site is otherwise green end to end. */
  --blue-600: #3a66e8;
  --blue-500: #3aafe8;
  --blue-400: #3ad0e8;
  /* Neutral greys for the Home hero's "Operate" panel. The design source dresses
     that half in grey rather than a second green so the two halves read as
     different propositions (package/styles.css .hero-panel-bpo). --ink /
     --ink-soft are green-tinted text colours and are the wrong tool for a
     surface, hence these two. */
  --grey-500: #737373;
  --grey-700: #4a4d52;
  --ink: #151914;
  --ink-soft: #586157;
  --paper: #fff;
  --line: #dfe6dc;

  /* --- Layer 2: editor-overridable aliases ----------------------------
     _Layout.cshtml emits exactly these names from Site Settings colour
     fields. Renaming them silently disables editor colour control.
     They hold greens despite the legacy "orange" naming.               */
  --primary-orange: var(--green-700);
  --secondary-orange: var(--green-500);
  --primary-grey: var(--ink);

  /* --- Layer 3: semantic tokens --------------------------------------- */
  --bg: var(--paper);
  --bg-elevated: var(--paper);
  --surface: var(--green-050);
  --surface-sunken: var(--green-100);

  --fg: var(--primary-grey);
  --fg-muted: var(--ink-soft);
  --fg-inverse: var(--paper);

  /* --on-dark / --on-dark-strong: for content sitting on a surface that is
     ALWAYS dark, in both light and dark mode — e.g. the hero panel
     (wwwroot/css/pages/home.css .hero), which is hard-pinned to
     --green-950 regardless of body.dark-mode (see the comment there).
     --fg-inverse is the WRONG token for that job: it means "opposite of
     the current mode", so it flips to a near-black ink in dark mode and
     goes invisible on a surface that never got lighter.
     These two are defined ONCE, here, and deliberately NOT re-pointed
     inside body.dark-mode below — the hero's colour is fixed, so content
     on it must be fixed too. Do NOT add a body.dark-mode override for
     --on-dark or --on-dark-strong; doing so reintroduces the Wave 4
     invisible-nav-text bug (nav text and CTA pill unreadable over the
     dark hero in dark mode). */
  --on-dark: var(--paper);
  --on-dark-strong: color-mix(in srgb, var(--green-700) 82%, #000);

  /* --surface-brand / --on-brand: the second fixed-surface pair, for
     sections that are always a brand-green card regardless of theme (Home's
     capability cards, ROI result panel, proof stats, CTA card — see
     wwwroot/css/pages/home.css). Same rule as --on-dark above: defined once
     here, deliberately NOT re-pointed under body.dark-mode below, because
     the surface itself never changes with the toggle. */
  --surface-brand: var(--green-600);
  --on-brand: var(--paper);

  /* Third fixed surface: the Case Studies index hero. A gradient rather than
     a flat colour, so it lives here as one token instead of being rebuilt in
     the page stylesheet. Like the two pairs above it is NOT re-pointed under
     body.dark-mode — the hero is the same blue in both modes, and --on-dark
     is the correct foreground on it. */
  --surface-case-hero: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 52%, var(--blue-400) 100%);

  --accent: var(--primary-orange);
  --accent-strong: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--paper));
  --accent-contrast: #fff;

  --border: var(--line);
  --border-strong: color-mix(in srgb, var(--line) 60%, var(--ink));

  --shadow: 0 22px 60px rgba(25, 53, 22, 0.12);
  --shadow-lg: 0 32px 80px rgba(25, 53, 22, 0.18);

  /* --- scales (the source design hard-codes these ad hoc) ------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 104px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.85s cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --header-height: 82px;
  --subnav-height: 48px;
}

/* Dark mode re-points the semantic layer only. Layer 2 is re-pinned first
   so that an editor's dark accent (injected later in <head> against this
   same selector) still wins the cascade and flows into --accent below. */
body.dark-mode {
  /* --on-dark, --on-dark-strong, --surface-brand and --on-brand are all
     intentionally NOT re-pointed here. See the :root definitions above —
     every fixed-surface token must stay fixed. */
  --primary-orange: var(--green-500);
  --secondary-orange: var(--green-300);
  --primary-grey: var(--green-050);

  --bg: var(--green-950);
  --bg-elevated: var(--green-900);
  --surface: var(--green-900);
  --surface-sunken: #0d1a0a;

  --fg: var(--primary-grey);
  --fg-muted: var(--green-300);
  --fg-inverse: var(--ink);

  --accent: var(--primary-orange);
  --accent-strong: color-mix(in srgb, var(--accent) 78%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--green-950));
  --accent-contrast: var(--green-950);

  --border: rgba(159, 216, 169, 0.18);
  --border-strong: rgba(159, 216, 169, 0.34);

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.55);
}