/* =============================================================================
 * KanbanN — DESIGN TOKENS
 * =============================================================================
 * The single source of truth for every visual value in the project.
 *
 * Everything downstream reads these: theme CSS, agency-blocks, React islands
 * (via Tailwind's theme.extend, which maps to these same custom properties), and
 * the block editor's colour palette.
 *
 * Changing a value HERE changes it everywhere. Nothing downstream hardcodes a
 * colour, size or radius (rules.txt section 14, 27, 62).
 *
 * Load order:  tokens.css  ->  base.css  ->  layout.css
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. FONT FACES
 * -----------------------------------------------------------------------------
 * Self-hosted rather than loaded from Google Fonts:
 *   - No third-party request on first paint (rules.txt section 30)
 *   - No consent/GPDR question for a font CDN
 *   - font-display: swap so text is readable immediately
 *
 * Inter (SIL Open Font License, variable 100–900, latin subset) is the single
 * brand face — ExtraBold headings, Regular body, SemiBold uppercase CTAs.
 * Bricolage Grotesque and Instrument Sans stay shipped for the cinematic
 * intro lockup and as the fallback used before Inter is cached.
 * -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/display-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/body-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
 * 2. ROOT TOKENS — non-colour
 * -------------------------------------------------------------------------- */

:root {
  /* --- Typography ---------------------------------------------------------
   * One corporate grotesque (Inter) for display and body. Weights follow the
   * KanbanN type brief: H1 800 · H2 600 · H3 500 · body 400 · CTAs 600 caps.
   *
   * Fluid scale using clamp(): no fixed pixel headings, so type scales smoothly
   * between viewports rather than jumping at breakpoints (section 11). The
   * middle value keeps a rem component so text still responds to the user's
   * browser font-size (WCAG 1.4.4).
   *
   *   step-6  36–52px   hero statements
   *   step-5  42–48px   H1
   *   step-4  28–32px   H2
   *   step-3  22–26px   H3 large / card titles
   *   step-2  20–22px   H3
   *   step-1  17–19px   lead paragraphs
   *   step-0  16px      body
   *   step--1 14–15px   CTAs, nav, meta
   *   step--2 12–13px   eyebrows, captions
   * ---------------------------------------------------------------------- */
  --font-display:
    "Inter", "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-body:
    "Inter", "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

  --weight-display: 700;
  --weight-heading: 600;
  --weight-subheading: 500;
  --weight-body: 400;
  --weight-cta: 600;

  /*
   * Type scale — dialled down ~10–15% from the previous launch values.
   * Brief: "professional text sizes… not too small not too big, elegant."
   * Mobile base stays ≥14px (step--1) for readability (rules.txt §11).
   * step-6 is reserved for hero display type only.
   */
  --step--2: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.08vw, 0.9375rem);
  --step-0: 1rem;
  --step-1: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);
  --step-2: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --step-3: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-4: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --step-5: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  --step-6: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);

  /* Line heights. Headings are tight, body is comfortable. */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.72;

  /* CTA / nav tracking — fully capitalised labels need air between glyphs. */
  --tracking-cta: 0.08em;
  --tracking-eyebrow: 0.14em;

  /* Measure — max line length for comfortable reading (section 34). */
  --measure: 68ch;
  --measure-narrow: 52ch;
  --measure-wide: 82ch;

  /* --- Space --------------------------------------------------------------
   * A 4px-based scale. Using a consistent scale rather than arbitrary values
   * is what makes the layout feel deliberate rather than accidental.
   * ---------------------------------------------------------------------- */
  --space-3xs: 0.25rem; /*  4px */
  --space-2xs: 0.5rem; /*  8px */
  --space-xs: 0.75rem; /* 12px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4rem; /* 64px */
  --space-3xl: 6rem; /* 96px */

  /*
   * Section rhythm — generous whitespace is part of the brand brief:
   * 56px on a phone rising to 80–120px between desktop sections.
   *
   * `--section-y-top` is intentionally lighter than the bottom so a
   * section's heading sits closer to the previous section — the client
   * flagged the full symmetric padding as "too much top space above
   * every heading". Bottom padding stays full so sections still breathe
   * where they visually end.
   */
  --section-y: clamp(3.5rem, 2.25rem + 4.5vw, 7.5rem);
  --section-y-top: clamp(2rem, 1.25rem + 2vw, 3.75rem);

  /* "Upward arrow" slant — the rise of a section's top edge, left to right. */
  --slant-rise: clamp(1.25rem, 2.6vw, 3.25rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 80rem; /* 1280px */
  --container-narrow: 48rem;
  --container-wide: 96rem;

  /* --- Radius — one lean control radius sitewide (match .btn) ------------ */
  --radius-xs: 0.125rem; /* 2px */
  --radius-sm: 0.1875rem; /* 3px — buttons, cards, popups, dock */
  --radius-md: 0.1875rem; /* = sm */
  --radius-lg: 0.1875rem; /* = sm — panels/cards, never larger */
  --radius-xl: 0.1875rem; /* = sm */
  --radius-pill: 0.1875rem; /* lean controls — not capsules */
  --radius-circle: 999px; /* avatars only */

  /* --- Elevation — soft navy-tinted premium shadows ---------------------- */
  --shadow-xs: 0 1px 3px rgba(11, 26, 51, 0.06);
  --shadow-sm: 0 4px 14px rgba(11, 26, 51, 0.08);
  --shadow-md: 0 10px 28px rgba(11, 26, 51, 0.11);
  --shadow-lg: 0 18px 44px rgba(11, 26, 51, 0.14);
  --shadow-xl: 0 24px 56px rgba(11, 26, 51, 0.18);

  /* --- Motion -------------------------------------------------------------
   * Durations and easing. Anything slower than ~600ms feels sluggish; anything
   * faster than ~150ms is not perceived as motion.
   * ---------------------------------------------------------------------- */
  --dur-instant: 120ms;
  --dur-fast: 280ms;
  --dur-normal: 520ms;
  --dur-slow: 900ms;
  --dur-slower: 1200ms;

  /* Long, decelerating tail — motion settles rather than snaps. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* --- Borders ------------------------------------------------------------ */
  --border-width: 1px;
  --focus-width: 3px;

  /* --- Z-index ------------------------------------------------------------
   * Named layers, so stacking order is intentional rather than a race between
   * arbitrary numbers. Gaps of 100 leave room to insert without renumbering.
   * ---------------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* =============================================================================
 * 3. COLOUR SCHEMES
 * =============================================================================
 * Each scheme defines the same semantic tokens. Because every component
 * references the SEMANTIC name (--color-primary) rather than a literal, switching
 * a scheme re-themes the entire site with no component changes.
 *
 * Applied by setting `data-scheme` on <html>, which the theme does server-side
 * from the saved option, so there is no flash of the wrong scheme.
 *
 * Gradients are first-class tokens (--gradient-*), not decorative one-offs, so a
 * component can request "the hero gradient" and receive the active scheme's.
 *
 * The ROOT default is the KanbanN brand scheme (navy-gold). Every token that a
 * legacy scheme leaves undefined therefore falls through to brand navy/gold —
 * never to a foreign palette.
 * ========================================================================== */

/* --- 3.1 KanbanN Navy & Gold (brand, default) --------------------------------
 * Brand brief ("Upward Arrow"):
 *   Corporate Navy   #003366  headers, nav, full-width structural blocks
 *   Acceleration Gold #DEAC2B active indicators, icons, primary CTAs, borders
 *   Steel Navy       #1E4E79  sub-headings, card borders, secondary buttons
 *   White / Soft Cloud #F4F7FA backgrounds
 * Expanded:
 *   Midnight Abyss   #0B1A33  dark anchor / dark-mode canvas
 *   Corporate Navy 2 #12264F  deep structural band
 *   Steel Horizon    #243B53  secondary buttons, icon containers, dividers
 *   Metallic Gold    #D4AF37  decorative graphics, accent lines
 *   Aged Brass       #C6A15B  muted headings, subtexts, borders
 *   Museum Ivory     #F7F2E8  warm cream spacer backdrop
 * -------------------------------------------------------------------------- */
:root,
[data-scheme="navy-gold"] {
  --color-bg: #ffffff;
  --color-surface: #f4f7fa;
  --color-surface-raised: #ffffff;
  --color-surface-warm: #f7f2e8;
  --color-text: #0b1a33;
  --color-muted: #4a5a70;
  --color-border: #d7deea;
  --color-primary: #003366;
  --color-primary-contrast: #ffffff;
  --color-accent: #deac2b;
  /* Brand brief: crisp white on gold CTAs (see components.css §1 for the
   * weight/tracking/shadow that keeps the label legible at 14–16px). */
  --color-accent-contrast: #ffffff;
  --color-success: #157f4a;
  --color-warning: #b45309;
  --color-danger: #c0392b;

  /* Navy ramp */
  --color-navy: #003366;
  --color-navy-deep: #12264f;
  --color-primary-dark: #0b1a33;
  --color-primary-light: #1e4e79;
  --color-primary-mid: #1e4e79;
  --color-primary-bright: #2a5f91;
  --color-primary-soft: #6d8fb5;
  --color-steel: #1e4e79;
  --color-steel-horizon: #243b53;
  /* Vivid band — the brighter counterpart to deep navy (McKinsey blue role). */
  --color-vivid: #1e4e79;

  /* Gold ramp */
  --color-gold: #deac2b;
  --color-gold-light: #e9c45e;
  --color-gold-dark: #b98c17;
  --color-gold-metallic: #d4af37;
  --color-brass: #c6a15b;
  /* Gold for SMALL text on light grounds — ≈4.6:1 on white (brand gold is 2.1:1). */
  --color-gold-ink: #a07611;

  --color-bg-soft: #f4f7fa;
  --color-bg-muted: #e8eef6;
  --color-border-light: #e3e9f1;
  --color-text-secondary: #4a5a70;
  --color-text-light: #7d8a9e;

  --gradient-hero: linear-gradient(135deg, #0b1a33 0%, #003366 55%, #1e4e79 100%);
  --gradient-accent: linear-gradient(135deg, #deac2b 0%, #e9c45e 100%);
  --gradient-section-soft: linear-gradient(180deg, #f4f7fa 0%, #ffffff 100%);
  /*
   * Deep structural band — midnight → corporate navy, with a gold glow rising
   * from the bottom-right corner ("upward arrow": light enters low and climbs).
   */
  --gradient-section-deep:
    radial-gradient(
      ellipse 70% 80% at 100% 100%,
      color-mix(in srgb, #deac2b 26%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(140deg, #0b1a33 0%, #12264f 58%, #003366 100%);
  /* Vivid steel band for CTA / alternation against deep navy; gold warms the top-right. */
  --gradient-section-vivid:
    radial-gradient(
      ellipse 60% 70% at 100% 0%,
      color-mix(in srgb, #deac2b 30%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(135deg, #1e4e79 0%, #245a8a 55%, #2a6aa3 100%);
  /* Soft cloud band — steel wash in the top-left fading to white. */
  --gradient-section-tint: linear-gradient(
    125deg,
    color-mix(in srgb, #1e4e79 14%, #ffffff) 0%,
    #eef3f8 38%,
    #f7f9fc 68%,
    #ffffff 100%
  );
  /* Museum Ivory band — warm cream with a brass glow in the lower-right. */
  --gradient-section-warm:
    radial-gradient(
      ellipse 70% 70% at 100% 100%,
      color-mix(in srgb, #deac2b 16%, #f7f2e8) 0%,
      transparent 60%
    ),
    linear-gradient(160deg, #f7f2e8 0%, #faf6ee 55%, #ffffff 100%);

  /* Korn Ferry–style white-section washes (mixed via nth-child in blocks.css). */
  --gradient-wash-tr: radial-gradient(
      ellipse 85% 75% at 100% 0%,
      color-mix(in srgb, #1e4e79 16%, #ffffff) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 55% 45% at 70% 10%,
      color-mix(in srgb, #deac2b 10%, #ffffff) 0%,
      transparent 50%
    );
  --gradient-wash-tl: radial-gradient(
      ellipse 85% 75% at 0% 0%,
      color-mix(in srgb, #1e4e79 15%, #ffffff) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 50% 40% at 28% 8%,
      color-mix(in srgb, #003366 8%, #ffffff) 0%,
      transparent 48%
    );
  --gradient-wash-br: radial-gradient(
      ellipse 90% 70% at 100% 100%,
      color-mix(in srgb, #1e4e79 14%, #ffffff) 0%,
      transparent 55%
    );
  --gradient-wash-bl: radial-gradient(
      ellipse 90% 70% at 0% 100%,
      color-mix(in srgb, #deac2b 12%, #ffffff) 0%,
      transparent 55%
    );
  --gradient-wash-top: linear-gradient(
      180deg,
      color-mix(in srgb, #1e4e79 14%, #ffffff) 0%,
      color-mix(in srgb, #eef3f8 70%, #ffffff) 28%,
      #ffffff 62%
    );
  --gradient-wash-bottom: linear-gradient(
      0deg,
      color-mix(in srgb, #1e4e79 12%, #ffffff) 0%,
      color-mix(in srgb, #eef3f8 65%, #ffffff) 30%,
      #ffffff 65%
    );
  --gradient-wash-sides: linear-gradient(
      90deg,
      color-mix(in srgb, #1e4e79 12%, #ffffff) 0%,
      #ffffff 38%,
      #ffffff 62%,
      color-mix(in srgb, #deac2b 10%, #ffffff) 100%
    );

  /* Banner media tint — navy veil with a thin gold warm-up, never heavy. */
  --gradient-banner-scrim: linear-gradient(
    145deg,
    color-mix(in srgb, #0b1a33 55%, transparent) 0%,
    color-mix(in srgb, #003366 32%, transparent) 48%,
    color-mix(in srgb, #deac2b 18%, transparent) 100%
  );
  --gradient-banner-scrim-copy: linear-gradient(
    to bottom,
    color-mix(in srgb, #0b1a33 28%, transparent) 0%,
    color-mix(in srgb, #003366 36%, transparent) 42%,
    color-mix(in srgb, #0b1a33 72%, transparent) 100%
  );

  --site-header-offset: 4.75rem;
}

/* --- 3.2 Emerald Gold (legacy recruitment scheme, opt-in) -------------------
 * Muted forest-teal + champagne gold. Kept for the recruitment vertical.
 * -------------------------------------------------------------------------- */
[data-scheme="emerald-gold"] {
  --color-bg: #ffffff;
  --color-surface: #eef6f6;
  --color-surface-raised: #ffffff;
  --color-surface-warm: #f3f6f2;
  --color-text: #0f1f21;
  --color-muted: #4b6467;
  --color-border: #cfe1e2;
  --color-primary: #13686e;
  --color-primary-contrast: #ffffff;
  --color-accent: #c9a449;
  --color-accent-contrast: #0f1f21;
  --color-success: #2a6b52;
  --color-warning: #a8842f;
  --color-danger: #b94a48;

  --color-primary-dark: #0b3f45;
  --color-primary-light: #1a8d87;
  --color-primary-mid: #2ea192;
  --color-primary-bright: #34a4a6;
  --color-primary-soft: #51c8cc;
  --color-steel: #1a8d87;
  --color-steel-horizon: #10555b;
  --color-vivid: #17a099;
  --color-gold: #c9a449;
  --color-gold-light: #e0c87f;
  --color-gold-dark: #9a7d3a;
  --color-gold-metallic: #c4a35a;
  --color-brass: #b8a070;
  --color-bg-soft: #eef6f6;
  --color-bg-muted: #e0efef;
  --color-border-light: #e3f0f0;
  --color-text-secondary: #4b6467;
  --color-text-light: #7a9193;
  --color-navy: #123f45;
  --color-navy-deep: #0b3f45;

  --gradient-hero: linear-gradient(140deg, #0b3f45 0%, #13686e 55%, #1a8d87 100%);
  --gradient-accent: linear-gradient(135deg, #c9a449 0%, #e0c87f 100%);
  --gradient-section-soft: linear-gradient(165deg, #eef6f6 0%, #f6fbfb 45%, #ffffff 100%);
  --gradient-section-deep: linear-gradient(140deg, #0b3f45 0%, #10555b 62%, #13686e 100%);
  --gradient-section-vivid: linear-gradient(135deg, #15918b 0%, #17a099 55%, #22b0a6 100%);
  --gradient-section-tint: linear-gradient(
    125deg,
    color-mix(in srgb, #51c8cc 22%, #ffffff) 0%,
    #e8f4f4 38%,
    #f5faf9 68%,
    #ffffff 100%
  );
  --gradient-wash-tr: radial-gradient(
      ellipse 85% 75% at 100% 0%,
      color-mix(in srgb, #51c8cc 32%, #ffffff) 0%,
      transparent 58%
    );
  --gradient-wash-tl: radial-gradient(
      ellipse 85% 75% at 0% 0%,
      color-mix(in srgb, #51c8cc 30%, #ffffff) 0%,
      transparent 58%
    );
  --gradient-wash-br: radial-gradient(
      ellipse 90% 70% at 100% 100%,
      color-mix(in srgb, #34a4a6 26%, #ffffff) 0%,
      transparent 55%
    );
  --gradient-wash-bl: radial-gradient(
      ellipse 90% 70% at 0% 100%,
      color-mix(in srgb, #2ea192 24%, #ffffff) 0%,
      transparent 55%
    );
  --gradient-wash-top: linear-gradient(
      180deg,
      color-mix(in srgb, #51c8cc 26%, #ffffff) 0%,
      #ffffff 62%
    );
  --gradient-wash-bottom: linear-gradient(
      0deg,
      color-mix(in srgb, #34a4a6 22%, #ffffff) 0%,
      #ffffff 65%
    );
  --gradient-wash-sides: linear-gradient(
      90deg,
      color-mix(in srgb, #51c8cc 20%, #ffffff) 0%,
      #ffffff 38%,
      #ffffff 62%,
      color-mix(in srgb, #2ea192 18%, #ffffff) 100%
    );
  --gradient-banner-scrim: linear-gradient(
    145deg,
    color-mix(in srgb, #c4a35a 32%, transparent) 0%,
    color-mix(in srgb, #51c8cc 16%, transparent) 48%,
    color-mix(in srgb, #c4a35a 26%, transparent) 100%
  );
  --gradient-banner-scrim-copy: linear-gradient(
    to bottom,
    color-mix(in srgb, #c4a35a 24%, transparent) 0%,
    color-mix(in srgb, #51c8cc 16%, transparent) 42%,
    color-mix(in srgb, #154850 52%, transparent) 100%
  );
}

/* --- 3.3 Corporate Navy (legacy executive palette) -------------------------- */
[data-scheme="corporate-navy"] {
  --color-bg: #ffffff;
  --color-surface: #f7f5f0;
  --color-surface-raised: #ffffff;
  --color-text: #15263a;
  --color-muted: #667384;
  --color-border: #d9dee5;
  --color-primary: #0c1b2a;
  --color-primary-contrast: #ffffff;
  --color-accent: #c9a24a;
  --color-accent-contrast: #07121e;
  --color-success: #2e7d5b;
  --color-warning: #b8892f;
  --color-danger: #b94a48;

  --color-primary-dark: #07121e;
  --color-primary-light: #193b67;
  --color-gold: #c9a24a;
  --color-gold-light: #e2c77a;
  --color-gold-dark: #b8892f;
  --color-bg-soft: #f7f5f0;
  --color-bg-muted: #eef1f4;
  --color-border-light: #e7eaee;
  --color-text-secondary: #667384;
  --color-text-light: #aab3bf;

  --gradient-hero: linear-gradient(135deg, #0c1b2a 0%, #193b67 100%);
  --gradient-accent: linear-gradient(135deg, #c9a24a 0%, #e2c77a 100%);
  --gradient-section-soft: linear-gradient(180deg, #f7f5f0 0%, #ffffff 100%);
  --gradient-section-deep: linear-gradient(145deg, #07121e 0%, #0c1b2a 55%, #193b67 100%);
  --gradient-section-tint: linear-gradient(
    145deg,
    color-mix(in srgb, #193b67 6%, #ffffff) 0%,
    #f7f5f0 48%,
    #ffffff 100%
  );
}

/* --- 3.4 Legacy Orange ------------------------------------------------------ */
[data-scheme="legacy-orange"] {
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-surface-raised: #ffffff;
  --color-text: #0e1d2f;
  --color-muted: #5a6b7d;
  --color-border: #e2e6eb;
  --color-primary: #0e1d2f;
  --color-primary-contrast: #ffffff;
  --color-accent: #f26b21;
  --color-accent-contrast: #ffffff;
  --color-success: #157f4a;
  --color-warning: #b25e00;
  --color-danger: #c0392b;
  --color-primary-dark: #071018;
  --color-primary-light: #1c3554;
  --color-gold: #f26b21;
  --color-gold-light: #ff9147;
  --color-gold-dark: #d9480f;
  --color-bg-soft: #f7f8fa;
  --color-bg-muted: #eef1f6;
  --color-border-light: #e2e6eb;
  --color-text-secondary: #5a6b7d;
  --color-text-light: #8a96a5;

  --gradient-hero: linear-gradient(135deg, #0e1d2f 0%, #1c3554 100%);
  --gradient-accent: linear-gradient(135deg, #f26b21 0%, #ff9147 100%);
  --gradient-section-soft: linear-gradient(165deg, #eef1f6 0%, #f7f8fa 42%, #ffffff 100%);
  --gradient-section-deep: linear-gradient(145deg, #0e1d2f 0%, #1a3352 55%, #243f63 100%);
  --gradient-section-tint: linear-gradient(
    145deg,
    color-mix(in srgb, #1c3554 8%, #ffffff) 0%,
    #f4f6f9 48%,
    #ffffff 100%
  );
}

/* --- 3.5 Corporate Blue ----------------------------------------------------- */
[data-scheme="corporate-blue"] {
  --color-bg: #ffffff;
  --color-surface: #f4f7fb;
  --color-surface-raised: #ffffff;
  --color-text: #051c2c;
  --color-muted: #52616f;
  --color-border: #dbe3ec;
  --color-primary: #051c2c;
  --color-primary-contrast: #ffffff;
  --color-accent: #2251ff;
  --color-accent-contrast: #ffffff;
  --color-success: #046a38;
  --color-warning: #a35a00;
  --color-danger: #b3261e;

  --gradient-hero: linear-gradient(160deg, #051c2c 0%, #0d3b66 100%);
  --gradient-accent: linear-gradient(135deg, #2251ff 0%, #00a9f4 100%);
  --gradient-section-soft: linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%);
  --gradient-section-deep: linear-gradient(150deg, #051c2c 0%, #0a2f52 50%, #0d3b66 100%);
}

/* --- 3.6 Editorial Ink ------------------------------------------------------ */
[data-scheme="editorial-ink"] {
  --color-bg: #fbfaf7;
  --color-surface: #f3f1eb;
  --color-surface-raised: #ffffff;
  --color-text: #14120f;
  --color-muted: #5c574e;
  --color-border: #e0dbd1;
  --color-primary: #14120f;
  --color-primary-contrast: #fbfaf7;
  --color-accent: #9a3412;
  --color-accent-contrast: #ffffff;
  --color-success: #3f6212;
  --color-warning: #92400e;
  --color-danger: #991b1b;

  --gradient-hero: linear-gradient(180deg, #14120f 0%, #2b2620 100%);
  --gradient-accent: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
  --gradient-section-soft: linear-gradient(180deg, #f3f1eb 0%, #fbfaf7 100%);
  --gradient-section-deep: linear-gradient(160deg, #14120f 0%, #2b2620 100%);
}

/* --- 3.7 Fresh Teal --------------------------------------------------------- */
[data-scheme="fresh-teal"] {
  --color-bg: #ffffff;
  --color-surface: #f0faf8;
  --color-surface-raised: #ffffff;
  --color-text: #062925;
  --color-muted: #4d6b66;
  --color-border: #d3e8e4;
  --color-primary: #062925;
  --color-primary-contrast: #ffffff;
  --color-accent: #0d9488;
  --color-accent-contrast: #ffffff;
  --color-success: #047857;
  --color-warning: #a16207;
  --color-danger: #be123c;

  --gradient-hero: linear-gradient(150deg, #062925 0%, #0f766e 100%);
  --gradient-accent: linear-gradient(135deg, #0d9488 0%, #34d399 100%);
  --gradient-section-soft: linear-gradient(180deg, #f0faf8 0%, #ffffff 100%);
  --gradient-section-deep: linear-gradient(150deg, #062925 0%, #0f766e 100%);
}

/* --- 3.8 Gradient Sunset ---------------------------------------------------- */
[data-scheme="gradient-sunset"] {
  --color-bg: #ffffff;
  --color-surface: #fff7f2;
  --color-surface-raised: #ffffff;
  --color-text: #2b1414;
  --color-muted: #6b5150;
  --color-border: #f2ded7;
  --color-primary: #7c2d12;
  --color-primary-contrast: #ffffff;
  --color-accent: #e11d48;
  --color-accent-contrast: #ffffff;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;

  --gradient-hero: linear-gradient(135deg, #7c2d12 0%, #e11d48 100%);
  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #e11d48 100%);
}

/* --- 3.9 Gradient Aurora ---------------------------------------------------- */
[data-scheme="gradient-aurora"] {
  --color-bg: #ffffff;
  --color-surface: #f4f4ff;
  --color-surface-raised: #ffffff;
  --color-text: #1a1140;
  --color-muted: #5b5378;
  --color-border: #e0def5;
  --color-primary: #1a1140;
  --color-primary-contrast: #ffffff;
  --color-accent: #6d28d9;
  --color-accent-contrast: #ffffff;
  --color-success: #047857;
  --color-warning: #b45309;
  --color-danger: #be123c;

  --gradient-hero: linear-gradient(140deg, #1a1140 0%, #4c1d95 50%, #0891b2 100%);
  --gradient-accent: linear-gradient(135deg, #6d28d9 0%, #06b6d4 100%);
}

/* --- 3.10 Gradient Emerald -------------------------------------------------- */
[data-scheme="gradient-emerald"] {
  --color-bg: #ffffff;
  --color-surface: #f0fdf4;
  --color-surface-raised: #ffffff;
  --color-text: #052e16;
  --color-muted: #4a6b57;
  --color-border: #d1ead9;
  --color-primary: #052e16;
  --color-primary-contrast: #ffffff;
  --color-accent: #059669;
  --color-accent-contrast: #ffffff;
  --color-success: #047857;
  --color-warning: #a16207;
  --color-danger: #b91c1c;

  --gradient-hero: linear-gradient(150deg, #052e16 0%, #047857 100%);
  --gradient-accent: linear-gradient(135deg, #059669 0%, #14b8a6 100%);
}

/* --- 3.11 Neutral Mono ------------------------------------------------------ */
[data-scheme="neutral-mono"] {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-surface-raised: #ffffff;
  --color-text: #0a0a0a;
  --color-muted: #5c5c5c;
  --color-border: #e0e0e0;
  --color-primary: #0a0a0a;
  --color-primary-contrast: #ffffff;
  --color-accent: #404040;
  --color-accent-contrast: #ffffff;
  --color-success: #3f6212;
  --color-warning: #78350f;
  --color-danger: #7f1d1d;

  --gradient-hero: linear-gradient(160deg, #0a0a0a 0%, #404040 100%);
  --gradient-accent: linear-gradient(135deg, #404040 0%, #737373 100%);
}

/* =============================================================================
 * 4. DARK MODE
 * =============================================================================
 * Dark mode OVERRIDES only the colour tokens. Every non-colour token (type,
 * space, radius, motion) is shared, so there is exactly one place to change a
 * spacing value and no risk of the two modes drifting apart.
 *
 * Applied via `data-theme="dark"` on <html>. The theme sets this server-side from
 * the visitor's cookie, and a tiny inline script corrects it before paint —
 * see inc/theme-mode.php. That is what prevents the white flash on load.
 *
 * Default dark canvas = Midnight Abyss (#0B1A33), the brand's dark anchor.
 * Gold lifts a half step so it clears 3:1 on the dark surface.
 * ========================================================================== */

[data-theme="dark"] {
  /*
   * Four distinguishable dark tones, all from the brand palette, so adjacent
   * bands still read as separate blocks on a dark canvas:
   *   Midnight Abyss  #0b1a33  page / --bg-default
   *   Corporate Navy  #12264f  --bg-surface
   *   Steel Horizon   #243b53  --bg-raised (the ivory spacer's dark twin)
   *   Corporate Navy  #003366 → Steel #1e4e79   --bg-inverse / --bg-gradient
   */
  --color-bg: #0b1a33;
  --color-surface: #12264f;
  --color-surface-raised: #1a3461;
  --color-surface-warm: #243b53;
  --color-text: #eef2f8;
  --color-muted: #aebbd0;
  --color-border: #2a4066;
  --color-primary: #ffffff;
  --color-primary-contrast: #0b1a33;
  --color-accent: #e9c45e;
  --color-accent-contrast: #0b1a33;
  --color-success: #4ade80;
  --color-warning: #e9c45e;
  --color-danger: #f87171;

  --color-navy: #003366;
  --color-navy-deep: #12264f;
  --color-primary-dark: #060f21;
  --color-primary-light: #3a6ea5;
  --color-primary-mid: #2a5f91;
  --color-primary-bright: #3a6ea5;
  --color-primary-soft: #6d8fb5;
  --color-steel: #3a6ea5;
  --color-steel-horizon: #243b53;
  --color-vivid: #1e4e79;
  --color-gold: #e9c45e;
  --color-gold-light: #f2d78a;
  --color-gold-dark: #c89a1f;
  --color-gold-metallic: #d4af37;
  --color-brass: #c6a15b;
  --color-gold-ink: #f2d78a;
  --color-bg-soft: #12264f;
  --color-bg-muted: #1a3461;
  --color-border-light: #2a4066;
  --color-text-secondary: #aebbd0;
  --color-text-light: #8d9bb4;

  --gradient-section-soft: linear-gradient(165deg, #12264f 0%, #0b1a33 55%, #1a3461 100%);
  /* Surface band: corporate navy lifting toward the raised tone, gold in the top-left. */
  --gradient-section-tint:
    radial-gradient(
      ellipse 60% 70% at 0% 0%,
      color-mix(in srgb, #deac2b 14%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(145deg, #1a3461 0%, #12264f 48%, #12264f 100%);
  /* Raised band: steel horizon with a brass glow — the warm spacer in dark. */
  --gradient-section-warm:
    radial-gradient(
      ellipse 70% 70% at 100% 100%,
      color-mix(in srgb, #c6a15b 18%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(160deg, #243b53 0%, #1f3449 60%, #1b2d40 100%);
  /* Deep band must not start at the page bg, or it merges with the band above. */
  --gradient-section-deep:
    radial-gradient(
      ellipse 70% 80% at 100% 100%,
      color-mix(in srgb, #deac2b 22%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(140deg, #003366 0%, #0f3c6e 58%, #1e4e79 100%);
  --gradient-section-vivid:
    radial-gradient(
      ellipse 60% 70% at 100% 0%,
      color-mix(in srgb, #deac2b 26%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(135deg, #1e4e79 0%, #245a8a 55%, #2a6aa3 100%);
  --gradient-hero: linear-gradient(145deg, #060f21 0%, #003366 55%, #1e4e79 100%);
  --gradient-accent: linear-gradient(135deg, #deac2b 0%, #e9c45e 100%);
  --gradient-banner-scrim: linear-gradient(
    145deg,
    color-mix(in srgb, #060f21 60%, transparent) 0%,
    color-mix(in srgb, #003366 36%, transparent) 48%,
    color-mix(in srgb, #deac2b 14%, transparent) 100%
  );
  --gradient-banner-scrim-copy: linear-gradient(
    to bottom,
    color-mix(in srgb, #060f21 34%, transparent) 0%,
    color-mix(in srgb, #003366 40%, transparent) 42%,
    color-mix(in srgb, #060f21 78%, transparent) 100%
  );

  /* Shadows need to be stronger in dark mode. */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);
  --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.6), 0 8px 16px rgb(0 0 0 / 0.4);
}

/* Scheme-specific dark adjustments. Each legacy scheme keeps its identity while
 * restoring legibility of its accent on a dark canvas. */
[data-theme="dark"][data-scheme="emerald-gold"] {
  --color-bg: #0b1718;
  --color-surface: #122426;
  --color-surface-raised: #1a3235;
  --color-text: #eef6f6;
  --color-muted: #b4c9cb;
  --color-border: #2a4548;
  --color-primary: #1d6066;
  --color-primary-contrast: #e6f2f2;
  --color-accent: #d4b76a;
  --color-accent-contrast: #0b1718;
  --color-primary-dark: #123f45;
  --color-primary-light: #51c8cc;
  --color-primary-mid: #2ea192;
  --color-primary-bright: #34a4a6;
  --color-primary-soft: #1d827e;
  --color-gold: #d4b76a;
  --color-gold-light: #e8d49a;
  --color-gold-dark: #c4a35a;
  --color-bg-soft: #122426;
  --color-bg-muted: #1a3235;
  --color-border-light: #2a4548;
  --color-text-secondary: #b4c9cb;
  --color-text-light: #9bb3b5;
  --color-navy: #123f45;
  --color-vivid: #126863;

  --gradient-section-soft: linear-gradient(165deg, #122426 0%, #0b1718 55%, #1a3235 100%);
  --gradient-section-tint: linear-gradient(145deg, #1a3235 0%, #122426 48%, #0b1718 100%);
  --gradient-section-deep: linear-gradient(140deg, #10373c 0%, #134a50 58%, #1a5f65 100%);
  --gradient-section-vivid: linear-gradient(135deg, #0f5a56 0%, #126863 55%, #14766f 100%);
  --gradient-hero: linear-gradient(145deg, #0b1718 0%, #1d6066 55%, #1d827e 100%);
  --gradient-accent: linear-gradient(135deg, #c4a35a 0%, #d4b76a 100%);
}

[data-theme="dark"][data-scheme="corporate-navy"] {
  --color-accent: #e2c77a;
  --gradient-hero: linear-gradient(135deg, #040b14 0%, #193b67 100%);
  --gradient-accent: linear-gradient(135deg, #c9a24a 0%, #e2c77a 100%);
}

[data-theme="dark"][data-scheme="legacy-orange"] {
  --color-accent: #ff8a4c;
  --color-accent-contrast: #1a0f06;
  --gradient-hero: linear-gradient(135deg, #0b1220 0%, #1c3350 100%);
  --gradient-accent: linear-gradient(135deg, #ff8a4c 0%, #ffb27a 100%);
}

[data-theme="dark"][data-scheme="corporate-blue"] {
  --color-accent: #6b8cff;
  --gradient-hero: linear-gradient(160deg, #04121c 0%, #0d3b66 100%);
  --gradient-accent: linear-gradient(135deg, #6b8cff 0%, #4dd4ff 100%);
}

[data-theme="dark"][data-scheme="editorial-ink"] {
  --color-accent: #fb923c;
  --gradient-hero: linear-gradient(180deg, #0a0908 0%, #241f19 100%);
  --gradient-accent: linear-gradient(135deg, #fb923c 0%, #fdba74 100%);
}

[data-theme="dark"][data-scheme="fresh-teal"] {
  --color-accent: #2dd4bf;
  --gradient-hero: linear-gradient(150deg, #041a17 0%, #0f766e 100%);
  --gradient-accent: linear-gradient(135deg, #2dd4bf 0%, #6ee7b7 100%);
}

[data-theme="dark"][data-scheme="gradient-sunset"] {
  --color-accent: #fb7185;
  --gradient-hero: linear-gradient(135deg, #3b0d0d 0%, #9f1239 100%);
  --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #fb7185 100%);
}

[data-theme="dark"][data-scheme="gradient-aurora"] {
  --color-accent: #a78bfa;
  --gradient-hero: linear-gradient(140deg, #120a2e 0%, #4c1d95 50%, #0891b2 100%);
  --gradient-accent: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
}

[data-theme="dark"][data-scheme="gradient-emerald"] {
  --color-accent: #34d399;
  --gradient-hero: linear-gradient(150deg, #031a0d 0%, #047857 100%);
  --gradient-accent: linear-gradient(135deg, #34d399 0%, #5eead4 100%);
}

[data-theme="dark"][data-scheme="neutral-mono"] {
  --color-accent: #d4d4d4;
  --color-accent-contrast: #0a0a0a;
  --gradient-hero: linear-gradient(160deg, #050505 0%, #262626 100%);
  --gradient-accent: linear-gradient(135deg, #a3a3a3 0%, #e5e5e5 100%);
}

/* =============================================================================
 * 5. REDUCED MOTION
 * =============================================================================
 * Non-negotiable accessibility requirement (section 13). When the visitor's OS
 * reports a preference for reduced motion, all non-essential movement stops.
 *
 * Durations collapse to 1ms rather than 0: a 0 duration can prevent transitionend
 * and animationend events from firing, which breaks scripts that wait on them.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Users who explicitly set "motion off" in the admin get the same treatment,
 * regardless of their OS setting. */
[data-motion="off"] {
  --dur-instant: 1ms;
  --dur-fast: 1ms;
  --dur-normal: 1ms;
  --dur-slow: 1ms;
  --dur-slower: 1ms;
}

/*
 * Mobile / tablet only — lighten the light-mode washes slightly toward white so
 * small screens stay airy. Dark structural bands keep their desktop values:
 * mixing them toward white pushed light copy below 3:1 on the vivid and hero
 * bands. Scoped to the brand scheme (the root default) so it never re-paints a
 * legacy scheme with foreign colours — the bug that left the site looking
 * emerald on phones after the navy rebrand.
 */
@media (max-width: 1023.98px) {
  :root:not([data-scheme]):not([data-theme="dark"]),
  [data-scheme="navy-gold"]:not([data-theme="dark"]) {
    --gradient-section-soft: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    --gradient-section-tint: linear-gradient(
      125deg,
      color-mix(in srgb, #1e4e79 7%, #ffffff) 0%,
      #f3f6fa 38%,
      #f9fafc 68%,
      #ffffff 100%
    );
    --gradient-wash-tr: radial-gradient(
      ellipse 85% 75% at 100% 0%,
      color-mix(in srgb, #1e4e79 12%, #ffffff) 0%,
      transparent 58%
    );
    --gradient-wash-tl: radial-gradient(
      ellipse 85% 75% at 0% 0%,
      color-mix(in srgb, #1e4e79 11%, #ffffff) 0%,
      transparent 58%
    );
    --gradient-wash-br: radial-gradient(
      ellipse 90% 70% at 100% 100%,
      color-mix(in srgb, #1e4e79 10%, #ffffff) 0%,
      transparent 55%
    );
    --gradient-wash-bl: radial-gradient(
      ellipse 90% 70% at 0% 100%,
      color-mix(in srgb, #deac2b 9%, #ffffff) 0%,
      transparent 55%
    );
    --gradient-wash-top: linear-gradient(
      180deg,
      color-mix(in srgb, #1e4e79 10%, #ffffff) 0%,
      #ffffff 62%
    );
    --gradient-wash-bottom: linear-gradient(
      0deg,
      color-mix(in srgb, #1e4e79 9%, #ffffff) 0%,
      #ffffff 65%
    );
    --gradient-wash-sides: linear-gradient(
      90deg,
      color-mix(in srgb, #1e4e79 9%, #ffffff) 0%,
      #ffffff 38%,
      #ffffff 62%,
      color-mix(in srgb, #deac2b 8%, #ffffff) 100%
    );
  }
}