/* 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: "Roboto";
    src: url("/fonts/roboto-var-latin-9a01b69183a9604ab3a439e388b30501.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: light dark;

    /* Brand slate (header, hero and footer stay slate in both themes). Palette from AcqSpire docs/DESIGN_SYSTEM.md. */
    --navy-950: #0f172a;
    --navy-900: #1e293b;
    --navy-800: #273449;
    --navy-700: #334155;
    --on-navy: #f1f5f9;
    --on-navy-2: #cbd5e1;

    /* One accent colour: royal blue (the app's action colour) */
    --accent: light-dark(#1e40af, #7aa7ff);
    --accent-strong: light-dark(#172554, #a8c4ff);
    --on-accent: light-dark(#ffffff, #0f172a);
    --accent-soft: light-dark(#e6ecfa, #1e2f5a);
    --accent-bright: #bae6fd; /* on slate surfaces */

    /* Surfaces and text */
    --bg: light-dark(#f8f9fc, #0f172a);
    --bg-alt: light-dark(#eef2f8, #131d33);
    --surface: light-dark(#ffffff, #1e293b);
    --surface-2: light-dark(#eef2f8, #273449);
    --line: light-dark(#cbd5e1, #334155);
    --text: light-dark(#172554, #f1f5f9);
    --text-2: light-dark(#475569, #cbd5e1);
    --glass: light-dark(rgb(255 255 255 / 0.72), rgb(30 41 59 / 0.72));

    /* Status colours (text and tinted background) */
    --good: light-dark(#0b7a42, #6fd9a0);
    --soon: light-dark(#9a5b00, #ffc978);
    --soon-bg: light-dark(#fff1dc, #3a2a10);
    --danger: light-dark(#c4281c, #ff9b92);

    /* Type: Roboto only (the most widely used web font) */
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: var(--font-body);
    --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: 4px;  /* buttons, chips, inputs, tabs */
    --r-md: 6px;  /* panels, cards */
    --r-lg: 6px;
    --r-pill: 999px;
    --shadow-sm: none;  /* flat: depth is a hairline border */
    --shadow-md: none;
    --shadow-lg: none;
    --ring: 0 0 0 3px light-dark(rgb(30 64 175 / 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; }
  }
}