/*
 * Design tokens: the single source for the app (imported by globals.css, wired into tailwind.config.ts) and the
 * landing page (site/build.mjs derives site/dist/assets/tokens.css from this file, turning the `.dark` block into a
 * prefers-color-scheme rule). Change a value here and both follow.
 *
 * Colours are HSL channel triples so Tailwind can add an alpha value. Keep every `.dark` colour defined in `:root` too.
 * The glass and mesh values (D-024) are complete colours with their alpha built in: they are composited, never re-tinted.
 * The file lives under frontend/ because the frontend Docker build context stops there.
 */
:root {
  /* Colour (light) */
  --background: 0 0% 100%;
  --surface: 196 20% 97.5%;
  --foreground: 205 32% 11%;
  --muted: 196 16% 95%;
  --muted-foreground: 205 12% 36%;
  --border: 200 14% 89%;
  --input: 202 10% 52%;
  --ring: 191 88% 27%;
  --accent: 191 88% 27%;
  --accent-foreground: 0 0% 100%;
  --accent-soft: 190 55% 94%;
  --success: 142 58% 26%;
  --success-soft: 142 45% 94%;
  --warning: 32 90% 30%;
  --warning-soft: 40 90% 93%;
  --danger: 0 68% 42%;
  --danger-soft: 0 80% 96%;
  --info: 218 72% 43.5%;
  --info-soft: 219 77% 95%;
  /* Lagoon: the structural secondary colour (D-024). Chrome tint, active nav row, selected rows, secondary buttons. */
  --secondary: 187 45% 88.5%;
  --secondary-foreground: 190 54% 24.5%;
  --secondary-strong: 189 46% 42%;
  /* The page behind the glass. */
  --canvas: 197 26% 94.5%;
  --chart-1: 191 88% 27%;
  --chart-2: 189 46% 42%;
  --chart-3: 190 29% 66%;
  --chart-4: 201 12% 62.5%;

  /* Glass (D-024): chrome = sidebar, header, landing nav; card = translucent panels without blur; strong = popovers, menus, toasts. */
  --glass-chrome: hsl(188 43% 93% / 0.7);
  --glass-card: hsl(0 0% 100% / 0.78);
  --glass-strong: hsl(0 0% 100% / 0.9);
  --glass-border: hsl(205 32% 11% / 0.08);
  --glass-highlight: inset 0 1px 0 hsl(0 0% 100% / 0.75);
  --glass-blur-chrome: 20px;
  --glass-blur-strong: 24px;
  --glass-blur-hero: 16px;
  --glass-saturate: 160%;
  /* The mesh: one fixed layer of soft radial gradients behind every glass surface. */
  --mesh-1: hsl(187 72% 56% / 0.3);
  --mesh-2: hsl(162 58% 60% / 0.24);
  --mesh-3: hsl(202 77% 71% / 0.24);
  --noise-opacity: 0.035;
  /* How strongly the app shows the mesh behind plain page content. Kept low enough that a control outline on the mesh still
     meets 3:1 and text stays AA without a glass layer (tests/tokens.test.ts); the landing may use more. */
  --mesh-strength: 0.45;
  /* Behind dialogs: a plain dim, no blur. Dark mode dims with black instead of hazing with the light foreground. */
  --scrim: hsl(205 32% 11% / 0.4);
  --shadow-glass: 0 1px 2px hsl(205 32% 11% / 0.04), 0 12px 32px -14px hsl(191 88% 27% / 0.22);
  --shadow-glass-strong: 0 1px 2px hsl(205 32% 11% / 0.06), 0 24px 56px -20px hsl(205 32% 11% / 0.3);
  --shadow-pop: 0 1px 2px hsl(205 32% 11% / 0.05), 0 18px 40px -18px hsl(205 32% 11% / 0.22);

  /* Type: the script face after Onest. globals.css (and the landing) switch it per <html lang> (D-024). */
  --font-script: ui-sans-serif;

  /* Type scale: size / line height */
  --text-2xs: 0.6875rem;
  --text-2xs-leading: 1.5;
  --text-xs: 0.75rem;
  --text-xs-leading: 1rem;
  --text-compact: 0.8125rem;
  --text-compact-leading: 1.5;
  --text-sm: 0.875rem;
  --text-sm-leading: 1.25rem;
  --text-base: 1rem;
  --text-base-leading: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg-leading: 1.75rem;
  --text-xl: 1.25rem;
  --text-xl-leading: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl-leading: 2rem;
  --text-3xl: 1.875rem;
  --text-3xl-leading: 2.25rem;

  /* Spacing: layout rhythm on top of Tailwind's 4px scale */
  --space-gutter: 1rem;
  --space-stack: 0.75rem;
  --space-section: 2rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  /* Status tags and counters (BRAND.md section 5). */
  --radius-tag: 0.3125rem;
  --size-tag: 1.375rem;
  --size-count: 1.125rem;

  /* Elevation */
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Stacking order */
  --z-banner: 40;
  --z-overlay: 50;
  --z-toast: 60;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-shimmer: 1400ms;
  /* The three hero transitions (sign-in, publish now, composer to calendar) and nothing else. */
  --duration-hero: 520ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* The steering motif: a path eases in, bends and settles. Used for drawn lines and the hero flow, never for UI chrome. */
  --ease-steer: cubic-bezier(0.45, 0, 0.15, 1);
  /* A colour fill or wipe crossing the screen: even acceleration in and out. */
  --ease-fill: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-path: 900ms;
  --distance-enter: 0.5rem;
  --stagger-step: 40ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 205 28% 7%;
    --surface: 205 24% 9.5%;
    --foreground: 195 14% 94%;
    --muted: 205 20% 13%;
    --muted-foreground: 200 10% 66%;
    --border: 205 16% 17%;
    --input: 205 12% 42%;
    --ring: 187 72% 56%;
    --accent: 187 72% 56%;
    --accent-foreground: 205 30% 8%;
    --accent-soft: 190 45% 14%;
    --success: 145 52% 55%;
    --success-soft: 145 38% 12%;
    --warning: 38 90% 62%;
    --warning-soft: 38 50% 12%;
    --danger: 0 85% 70%;
    --danger-soft: 0 40% 14%;
    --info: 220 95% 75.5%;
    --info-soft: 220 47% 16.5%;
    --secondary: 192 50% 15.5%;
    --secondary-foreground: 187 51% 75%;
    --secondary-strong: 188 45% 56%;
    --canvas: 207 35% 6%;
    --chart-1: 187 72% 56%;
    --chart-2: 188 45% 56%;
    --chart-3: 189 45% 33.5%;
    --chart-4: 205 12% 42%;
    --glass-chrome: hsl(201 36% 9% / 0.66);
    --glass-card: hsl(204 29% 10% / 0.74);
    --glass-strong: hsl(204 29% 10% / 0.9);
    --glass-border: hsl(0 0% 100% / 0.08);
    --glass-highlight: inset 0 1px 0 hsl(0 0% 100% / 0.06);
    --mesh-1: hsl(188 75% 41% / 0.26);
    --mesh-2: hsl(166 64% 34% / 0.18);
    --mesh-3: hsl(207 67% 33% / 0.24);
    --noise-opacity: 0.05;
    --scrim: hsl(0 0% 0% / 0.6);
    --shadow-glass: 0 1px 2px hsl(0 0% 0% / 0.4), 0 16px 40px -18px hsl(0 0% 0% / 0.7);
    --shadow-glass-strong: 0 1px 2px hsl(0 0% 0% / 0.5), 0 28px 64px -20px hsl(0 0% 0% / 0.8);
    --shadow-pop: 0 1px 2px hsl(0 0% 0% / 0.4), 0 18px 40px -18px hsl(0 0% 0% / 0.7);
  }
}