/* =============================================================================
 * Prelect — 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
 *
 * Files are expected in assets/fonts/. If a file is missing, the stack falls
 * through to the system font — the layout must not depend on a download.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 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
 *
 * Bricolage Grotesque (display) and Instrument Sans (body), both SIL Open Font
 * License, both variable, latin subset only. Files are in assets/fonts/.
 *
 * These two faces used to be named "Prelect Display" / "Prelect Sans" and pointed
 * at woff2 files that were never in the repository, so the declarations silently
 * fell through and the site rendered headings in Georgia and body copy in the
 * system font. Naming a font is not the same as shipping one (docs/16 §1 E5).
 * -------------------------------------------------------------------------- */

@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 ---------------------------------------------------------
	 * Fluid scale using clamp(): no fixed pixel headings, so type scales smoothly
	 * between viewports rather than jumping at breakpoints (section 11).
	 *
	 * The middle value uses a viewport unit with a rem component, so the text
	 * still responds to the user's browser font-size setting — pure `vw` does not,
	 * which breaks zoom accessibility (WCAG 1.4.4).
	 * ---------------------------------------------------------------------- */
  /*
   * Corporate grotesque for both display and body (McKinsey-style restraint:
   * one neutral sans, medium weights, tighter scale). Bricolage stays shipped
   * for the cinematic intro brand lockup only.
   */
  --font-display:
    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-body:
    "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;

  /* Heading weights — medium, never heavy. */
  --weight-display: 500;
  --weight-heading: 600;
  --weight-body: 400;

  --step--2: clamp(0.74rem, 0.71rem + 0.12vw, 0.82rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.16vw, 0.96rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --step-1: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.3rem + 0.9vw, 2.05rem);
  --step-4: clamp(1.85rem, 1.45rem + 1.7vw, 2.7rem);
  --step-5: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --step-6: clamp(2.6rem, 1.75rem + 3.6vw, 4.4rem);

  /* Line heights. Headings are tight, body is comfortable. */
  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.58;
  --leading-relaxed: 1.7;

  /* 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 */

  /* Fluid section padding — ~40–80px corporate rhythm. */
  --section-y: clamp(2.5rem, 1.5rem + 3vw, 5rem);

  /* --- 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 ink-tinted premium shadows ----------------------- */
  --shadow-xs: 0 1px 3px rgba(15, 31, 28, 0.05);
  --shadow-sm: 0 4px 14px rgba(15, 31, 28, 0.07);
  --shadow-md: 0 10px 28px rgba(15, 31, 28, 0.1);
  --shadow-lg: 0 18px 44px rgba(15, 31, 28, 0.13);
  --shadow-xl: 0 24px 56px rgba(15, 31, 28, 0.16);

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

  /* 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 ~12 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.
 * ========================================================================== */

/* --- 3.1 Emerald Gold (default) --------------------------------------------
 * Muted forest-teal + champagne gold (executive, not saturated “parrot” green).
 * Light: white / soft mint wash sections; charcoal body; teal headings.
 * Dark: near-black teal canvas with lifted gold (scheme dark block below).
 * primary #0F3D38 · label #1F5C54 · gold #C4A35A · wash #EEF4F2
 * -------------------------------------------------------------------------- */
:root,
/*
 * Emerald Gold — screenshot teal scale (light → deep) + champagne gold.
 * #51C8CC · #34A4A6 · #2EA192 · #1D827E · #1D6066
 */
[data-scheme="emerald-gold"] {
  /* HD palette: cleaner whites, richer saturated emerald, crisp ink. */
  --color-bg: #ffffff;
  --color-surface: #eef6f6;
  --color-surface-raised: #ffffff;
  --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;
  /* Vivid band — the "electric" counterpart to the deep emerald (McKinsey blue role). */
  --color-vivid: #17a099;
  --color-gold: #c9a449;
  --color-gold-light: #e0c87f;
  --color-gold-dark: #9a7d3a;
  --color-bg-soft: #eef6f6;
  --color-bg-muted: #e0efef;
  --color-border-light: #e3f0f0;
  --color-text-secondary: #4b6467;
  --color-text-light: #7a9193;

  --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%);
  /* Flat-leaning deep band — crisp, not washed. */
  --gradient-section-deep: linear-gradient(140deg, #0b3f45 0%, #10555b 62%, #13686e 100%);
  /* Vivid band for CTA / alternation against deep emerald. */
  --gradient-section-vivid: linear-gradient(135deg, #15918b 0%, #17a099 55%, #22b0a6 100%);
  /* Soft cyan wash → white (contact / content bands). */
  --gradient-section-tint: linear-gradient(
    125deg,
    color-mix(in srgb, #51c8cc 22%, #ffffff) 0%,
    #e8f4f4 38%,
    #f5faf9 68%,
    #ffffff 100%
  );

  /*
   * Korn Ferry–style white-section washes (mix via nth-child in blocks.css).
   * Uses the full teal scale: soft #51C8CC · bright #34A4A6 · mid #2EA192.
   */
  /* Image layers only — solid white comes from background-color on the block. */
  --gradient-wash-tr: radial-gradient(
      ellipse 85% 75% at 100% 0%,
      color-mix(in srgb, #51c8cc 32%, #ffffff) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 55% 45% at 70% 10%,
      color-mix(in srgb, #34a4a6 12%, #ffffff) 0%,
      transparent 50%
    );
  --gradient-wash-tl: radial-gradient(
      ellipse 85% 75% at 0% 0%,
      color-mix(in srgb, #51c8cc 30%, #ffffff) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 50% 40% at 28% 8%,
      color-mix(in srgb, #2ea192 14%, #ffffff) 0%,
      transparent 48%
    );
  --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%,
      color-mix(in srgb, #e8f4f4 70%, #ffffff) 28%,
      #ffffff 62%
    );
  --gradient-wash-bottom: linear-gradient(
      0deg,
      color-mix(in srgb, #34a4a6 22%, #ffffff) 0%,
      color-mix(in srgb, #e8f4f4 65%, #ffffff) 30%,
      #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%
    );

  /* Banner media tint — thin gold→emerald wash (matches showcase), not heavy green. */
  --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%
  );

  /* Legacy name used in banner letterbox — always emerald, never legacy navy. */
  --color-navy: #123f45;

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

/* --- 3.1b Corporate Navy ----------------------------------------------------
 * Premium executive palette: deep navy + champagne gold on ivory/white.
 * navy #0C1B2A · gold #C9A24A · ivory #F7F5F0
 * -------------------------------------------------------------------------- */
[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;

  /* Aliases matching the corporate design brief. */
  --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%
  );
  --site-header-offset: 4.25rem;
}

/* --- 3.1b Prelect Orange (legacy brand) ------------------------------------
 * Deep navy with the original Prelect orange accent. Kept for opt-in use.
 * -------------------------------------------------------------------------- */
[data-scheme="prelect-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%
  );
  --site-header-offset: 4.25rem;
}

/* --- 3.2 Corporate Blue -----------------------------------------------------
 * The McKinsey-like high-contrast deep blue on white. Verified brand principle:
 * "the colour palette sets deep blue against white".
 * -------------------------------------------------------------------------- */
[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.3 Editorial Ink ------------------------------------------------------
 * Near-black on warm off-white, serif-forward. The long-form reading scheme.
 * -------------------------------------------------------------------------- */
[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.4 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.5 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.6 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.7 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.8 Neutral Mono -------------------------------------------------------
 * Monochrome. Maximum contrast, minimal brand. Useful for print and for testing
 * whether a layout depends on colour to carry meaning (section 14).
 * -------------------------------------------------------------------------- */
[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.
 *
 * Contrast: every pairing below was chosen to clear WCAG AA (4.5:1 for body
 * text, 3:1 for large text and UI). section 13, 14.
 * ========================================================================== */

[data-theme="dark"] {
  /*
   * Default dark canvas = Emerald Gold (matches data-scheme="emerald-gold").
   * Opt-in schemes below override; avoid legacy corporate-navy blues here.
   */
  --color-bg: #0b1718;
  --color-surface: #122426;
  --color-surface-raised: #1a3235;
  --color-text: #e6f2f2;
  --color-muted: #9bb3b5;
  --color-border: #2a4548;
  --color-primary: #1d6066;
  --color-primary-contrast: #e6f2f2;
  --color-accent: #d4b76a;
  --color-accent-contrast: #0b1718;
  --color-success: #4ade80;
  --color-warning: #d4b76a;
  --color-danger: #f87171;
  --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: #9bb3b5;
  --color-text-light: #6d8688;
  --color-navy: #123f45;

  --color-vivid: #1a9c95;

  --gradient-section-soft: linear-gradient(165deg, #122426 0%, #0b1718 55%, #1a3235 100%);
  --gradient-section-tint: linear-gradient(145deg, #1a3235 0%, #122426 48%, #0b1718 100%);
  /* Deep band must not start at the page bg, or it merges with the band above. */
  --gradient-section-deep: linear-gradient(140deg, #10373c 0%, #134a50 58%, #1a5f65 100%);
  --gradient-section-vivid: linear-gradient(135deg, #128079 0%, #1a9c95 55%, #22ada4 100%);
  --gradient-hero: linear-gradient(145deg, #0b1718 0%, #1d6066 55%, #1d827e 100%);
  --gradient-accent: linear-gradient(135deg, #c4a35a 0%, #d4b76a 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.
 *
 * The light-mode accent for several schemes is too dark to use on a dark
 * background (e.g. deep navy on near-black fails contrast). These override the
 * accent only, keeping each scheme's identity while restoring legibility. */
[data-theme="dark"][data-scheme="emerald-gold"] {
  --color-navy: #123f45;
}

[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="prelect-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 every gradient token ~20% toward white
 * (color-mix 80% original + 20% white). Desktop (≥1024px) keeps base tokens.
 */
@media (max-width: 1023.98px) {
  :root {
    --gradient-hero: linear-gradient(
      140deg,
      color-mix(in srgb, #0b3f45 80%, #ffffff) 0%,
      color-mix(in srgb, #13686e 80%, #ffffff) 55%,
      color-mix(in srgb, #1a8d87 80%, #ffffff) 100%
    );
    --gradient-accent: linear-gradient(
      135deg,
      color-mix(in srgb, #c9a449 80%, #ffffff) 0%,
      color-mix(in srgb, #e0c87f 80%, #ffffff) 100%
    );
    --gradient-section-soft: linear-gradient(
      165deg,
      color-mix(in srgb, #eef6f6 80%, #ffffff) 0%,
      color-mix(in srgb, #f6fbfb 80%, #ffffff) 45%,
      #ffffff 100%
    );
    --gradient-section-deep: linear-gradient(
      140deg,
      color-mix(in srgb, #0b3f45 80%, #ffffff) 0%,
      color-mix(in srgb, #10555b 80%, #ffffff) 62%,
      color-mix(in srgb, #13686e 80%, #ffffff) 100%
    );
    --gradient-section-vivid: linear-gradient(
      135deg,
      color-mix(in srgb, #15918b 80%, #ffffff) 0%,
      color-mix(in srgb, #17a099 80%, #ffffff) 55%,
      color-mix(in srgb, #22b0a6 80%, #ffffff) 100%
    );
    --gradient-section-tint: linear-gradient(
      125deg,
      color-mix(in srgb, #51c8cc 16%, #ffffff) 0%,
      color-mix(in srgb, #e8f4f4 80%, #ffffff) 38%,
      color-mix(in srgb, #f5faf9 80%, #ffffff) 68%,
      #ffffff 100%
    );

    --gradient-wash-tr: radial-gradient(
        ellipse 85% 75% at 100% 0%,
        color-mix(in srgb, #51c8cc 24%, #ffffff) 0%,
        transparent 58%
      ),
      radial-gradient(
        ellipse 55% 45% at 70% 10%,
        color-mix(in srgb, #34a4a6 8%, #ffffff) 0%,
        transparent 50%
      );
    --gradient-wash-tl: radial-gradient(
        ellipse 85% 75% at 0% 0%,
        color-mix(in srgb, #51c8cc 22%, #ffffff) 0%,
        transparent 58%
      ),
      radial-gradient(
        ellipse 50% 40% at 28% 8%,
        color-mix(in srgb, #2ea192 10%, #ffffff) 0%,
        transparent 48%
      );
    --gradient-wash-br: radial-gradient(
        ellipse 90% 70% at 100% 100%,
        color-mix(in srgb, #34a4a6 18%, #ffffff) 0%,
        transparent 55%
      );
    --gradient-wash-bl: radial-gradient(
        ellipse 90% 70% at 0% 100%,
        color-mix(in srgb, #2ea192 16%, #ffffff) 0%,
        transparent 55%
      );
    --gradient-wash-top: linear-gradient(
      180deg,
      color-mix(in srgb, #51c8cc 18%, #ffffff) 0%,
      color-mix(in srgb, #e8f4f4 80%, #ffffff) 28%,
      #ffffff 62%
    );
    --gradient-wash-bottom: linear-gradient(
      0deg,
      color-mix(in srgb, #34a4a6 14%, #ffffff) 0%,
      color-mix(in srgb, #e8f4f4 80%, #ffffff) 30%,
      #ffffff 65%
    );
    --gradient-wash-sides: linear-gradient(
      90deg,
      color-mix(in srgb, #51c8cc 14%, #ffffff) 0%,
      #ffffff 38%,
      #ffffff 62%,
      color-mix(in srgb, #2ea192 12%, #ffffff) 100%
    );

    --gradient-banner-scrim: linear-gradient(
      145deg,
      color-mix(in srgb, #c4a35a 24%, transparent) 0%,
      color-mix(in srgb, #51c8cc 12%, transparent) 48%,
      color-mix(in srgb, #c4a35a 18%, transparent) 100%
    );
    --gradient-banner-scrim-copy: linear-gradient(
      to bottom,
      color-mix(in srgb, #c4a35a 18%, transparent) 0%,
      color-mix(in srgb, #51c8cc 12%, transparent) 42%,
      color-mix(in srgb, #154850 36%, transparent) 100%
    );
  }

  [data-theme="dark"] {
    --gradient-section-soft: linear-gradient(
      165deg,
      color-mix(in srgb, #122426 80%, #2a4548) 0%,
      color-mix(in srgb, #0b1718 80%, #1a3235) 55%,
      color-mix(in srgb, #1a3235 80%, #2a4548) 100%
    );
    --gradient-section-tint: linear-gradient(
      145deg,
      color-mix(in srgb, #1a3235 80%, #2a4548) 0%,
      color-mix(in srgb, #122426 80%, #1a3235) 48%,
      color-mix(in srgb, #0b1718 80%, #1a3235) 100%
    );
    --gradient-section-deep: linear-gradient(
      140deg,
      color-mix(in srgb, #10373c 80%, #2a5a60) 0%,
      color-mix(in srgb, #134a50 80%, #2f6a70) 58%,
      color-mix(in srgb, #1a5f65 80%, #348088) 100%
    );
    --gradient-section-vivid: linear-gradient(
      135deg,
      color-mix(in srgb, #128079 80%, #ffffff) 0%,
      color-mix(in srgb, #1a9c95 80%, #ffffff) 55%,
      color-mix(in srgb, #22ada4 80%, #ffffff) 100%
    );
    --gradient-hero: linear-gradient(
      145deg,
      color-mix(in srgb, #0b1718 80%, #1d6066) 0%,
      color-mix(in srgb, #1d6066 80%, #ffffff) 55%,
      color-mix(in srgb, #1d827e 80%, #ffffff) 100%
    );
    --gradient-accent: linear-gradient(
      135deg,
      color-mix(in srgb, #c4a35a 80%, #ffffff) 0%,
      color-mix(in srgb, #d4b76a 80%, #ffffff) 100%
    );
    --gradient-banner-scrim: linear-gradient(
      145deg,
      color-mix(in srgb, #c4a35a 20%, transparent) 0%,
      color-mix(in srgb, #51c8cc 10%, transparent) 48%,
      color-mix(in srgb, #c4a35a 16%, transparent) 100%
    );
    --gradient-banner-scrim-copy: linear-gradient(
      to bottom,
      color-mix(in srgb, #c4a35a 16%, transparent) 0%,
      color-mix(in srgb, #51c8cc 10%, transparent) 42%,
      color-mix(in srgb, #154850 28%, transparent) 100%
    );
  }
}