/* =========================================================
   Design tokens: palette, semantic colours, type scale, spacing.
   Every colour on the site comes from here.
   Contrast notes (WCAG AA):
   - Teal #1FA7A0 on white is 2.9:1, so in light mode teal is used for
     fills, rules and glows only; text on teal uses Midnight Navy (5.2:1).
   - Links in light mode use Deep Blue (8.6:1 on white).
   ========================================================= */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette: light mode (Enterprise Professional) */
  --c-navy: #10253F;
  --c-deep-blue: #1D4F7A;
  --c-teal: #1FA7A0;
  --c-cloud: #E8EDF2;
  --c-charcoal: #222B33;
  --c-white: #FFFFFF;

  /* Brand palette: dark mode */
  --c-dark-bg: #09121F;
  --c-dark-primary: #4E92D9;
  --c-dark-accent: #3BC3B5;
  --c-dark-text: #F5F7FA;

  /* Semantic: light */
  --bg: var(--c-white);
  --bg-soft: var(--c-cloud);
  --surface: var(--c-white);
  --text: var(--c-charcoal);
  --text-strong: var(--c-navy);
  --text-muted: color-mix(in srgb, var(--c-charcoal) 85%, var(--c-white)); /* ~8:1 on white, ~6.8:1 on Cloud Gray */
  --link: var(--c-deep-blue);
  --accent: var(--c-teal);
  --on-accent: var(--c-navy);
  --border: rgb(16 37 63 / 0.12);
  --border-strong: rgb(16 37 63 / 0.22);
  --glow: rgb(29 79 122 / 0.12);
  --contour: rgb(29 79 122 / 0.22);
  --grid: rgb(29 79 122 / 0.06);
  --hero-wash:
    radial-gradient(60% 70% at 78% 40%, rgb(31 167 160 / 0.14), transparent 70%),
    linear-gradient(180deg, var(--c-white) 0%, var(--c-cloud) 100%);
  --header-bg: rgb(255 255 255 / 0.75);
  --logo-glow: transparent;
  --focus: var(--c-deep-blue);

  /* Always-dark surfaces (CTA band, footer) use the navy gradient in both themes */
  --band-bg: linear-gradient(135deg, var(--c-navy) 0%, var(--c-deep-blue) 100%);
  --footer-bg: var(--c-navy);
  --band-text: var(--c-white);
  --band-muted: var(--c-cloud);     /* 13:1 on navy, 7.3:1 on Deep Blue */
  --band-link: var(--c-dark-accent); /* 7.1:1 on navy; used on solid navy only */
  --band-border: rgb(255 255 255 / 0.14);

  /* Theme-dependent image visibility */
  --show-light: inline-block;
  --show-dark: none;

  /* Type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.8rem);
  --step-3: clamp(1.7rem, 1.35rem + 1.7vw, 2.7rem);
  --step-4: clamp(2.25rem, 1.6rem + 3.3vw, 4.1rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 76px;

  color-scheme: light;
}

/* Dark tokens. Applied by system preference (unless the visitor chose light),
   or by an explicit choice saved by the theme toggle. Keep both blocks in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-dark-bg);
    --bg-soft: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
    --surface: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
    --text: var(--c-dark-text);
    --text-strong: var(--c-dark-text);
    --text-muted: color-mix(in srgb, var(--c-dark-text) 78%, var(--c-dark-bg));
    --link: var(--c-dark-primary);
    --accent: var(--c-dark-accent);
    --on-accent: var(--c-dark-bg);
    --border: rgb(245 247 250 / 0.10);
    --border-strong: rgb(245 247 250 / 0.20);
    --glow: rgb(59 195 181 / 0.10);
    --contour: rgb(78 146 217 / 0.20);
    --grid: rgb(78 146 217 / 0.07);
    --hero-wash:
      radial-gradient(60% 70% at 78% 40%, rgb(29 79 122 / 0.55), transparent 70%),
      linear-gradient(160deg, var(--c-dark-bg) 0%, var(--c-navy) 100%);
    --header-bg: rgb(9 18 31 / 0.75);
    --logo-glow: rgb(78 146 217 / 0.35);
    --focus: var(--c-dark-accent);
    --band-bg: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark-bg) 100%);
    --footer-bg: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
    --show-light: none;
    --show-dark: inline-block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--c-dark-bg);
  --bg-soft: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
  --surface: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
  --text: var(--c-dark-text);
  --text-strong: var(--c-dark-text);
  --text-muted: color-mix(in srgb, var(--c-dark-text) 78%, var(--c-dark-bg));
  --link: var(--c-dark-primary);
  --accent: var(--c-dark-accent);
  --on-accent: var(--c-dark-bg);
  --border: rgb(245 247 250 / 0.10);
  --border-strong: rgb(245 247 250 / 0.20);
  --glow: rgb(59 195 181 / 0.10);
  --contour: rgb(78 146 217 / 0.20);
  --grid: rgb(78 146 217 / 0.07);
  --hero-wash:
    radial-gradient(60% 70% at 78% 40%, rgb(29 79 122 / 0.55), transparent 70%),
    linear-gradient(160deg, var(--c-dark-bg) 0%, var(--c-navy) 100%);
  --header-bg: rgb(9 18 31 / 0.75);
  --logo-glow: rgb(78 146 217 / 0.35);
  --focus: var(--c-dark-accent);
  --band-bg: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark-bg) 100%);
    --footer-bg: color-mix(in srgb, var(--c-navy) 45%, var(--c-dark-bg));
  --show-light: none;
  --show-dark: inline-block;
  color-scheme: dark;
}