/* Design tokens: the ONLY place raw colours, sizes and fonts are defined. Everything else uses var(--...).
   Theme: follows the OS (color-scheme: light dark) and a manual toggle sets data-theme on <html>. */
@layer reset, tokens, base, layout, components, sections, mockups, utilities;

@layer tokens {
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var-latin-260c81a4759baf163c025001c4f27872.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/space-grotesk-var-latin-87c506d88b9f587f0e2292bc271f5083.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: light dark;

    /* Brand navy (header, hero and footer stay navy in both themes) */
    --navy-950: #070d1a;
    --navy-900: #0b1324;
    --navy-800: #111c34;
    --navy-700: #1a2744;
    --on-navy: #e8eefc;
    --on-navy-2: #b4c0dc;

    /* One accent colour */
    --accent: light-dark(#2457d6, #7aa7ff);
    --accent-strong: light-dark(#1b44ad, #a8c4ff);
    --on-accent: light-dark(#ffffff, #0b1324);
    --accent-soft: light-dark(#e6edfd, #172a52);
    --accent-bright: #7aa7ff; /* on navy surfaces */

    /* Surfaces and text */
    --bg: light-dark(#f7f9fc, #0b1324);
    --bg-alt: light-dark(#eef2f8, #0e1830);
    --surface: light-dark(#ffffff, #111c34);
    --surface-2: light-dark(#f2f5fa, #16233f);
    --line: light-dark(#d6deeb, #26365a);
    --text: light-dark(#0b1324, #e8eefc);
    --text-2: light-dark(#44506a, #b0bcd8);
    --glass: light-dark(rgb(255 255 255 / 0.72), rgb(17 28 52 / 0.72));

    /* Status colours (text and tinted background) */
    --good: light-dark(#0b6b3a, #6fd9a0);
    --good-bg: light-dark(#e3f5ec, #12331f);
    --soon: light-dark(#8a4b00, #ffc978);
    --soon-bg: light-dark(#fff1dc, #3a2a10);
    --progress: light-dark(#1b4fa8, #9dc0ff);
    --progress-bg: light-dark(#e4eefc, #162b52);
    --danger: light-dark(#b3261e, #ff9b92);

    /* Type */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
    --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
    --lh-tight: 1.1;
    --lh-base: 1.6;

    /* Space, shape, depth, motion */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 7rem;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgb(7 13 26 / 0.08);
    --shadow-md: 0 10px 30px rgb(7 13 26 / 0.12);
    --shadow-lg: 0 24px 60px rgb(7 13 26 / 0.28);
    --ring: 0 0 0 3px light-dark(rgb(36 87 214 / 0.4), rgb(122 167 255 / 0.5));
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 180ms;
    --wrap: 72rem;
    --wrap-narrow: 46rem;
    --header-h: 4rem;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur: 0ms; }
  }
}