/* App tokens on top of the brand theme.
   site/css/brand.css (generated by scripts/apply-brand.mjs from THEME in
   site/js/brand.js) defines the fonts and the base palette: --bg, --bg-subtle,
   --surface, --border, --border-strong, --text, --text-2, --text-3, --ink,
   --ink-hover, --accent, --accent-text, --accent-soft, --danger, --danger-soft,
   --mark, --wordmark. Load brand.css with this file; one file controls both
   the marketing site and the app. The names below are the app's semantic
   names, read from those brand variables (the fallbacks are the same values,
   so a page that loads only this file still looks right). Light theme only.
   Every text color meets WCAG AA on --bg, --surface and --surface-2. */
:root {
  color-scheme: light;
  /* Deck colors, kept for the few illustrations that use them. */
  --ground: #264653;
  --ground-deep: #1d3842;
  --teal: #2a9d8f;
  --gold: var(--mark, #e9c46a);
  --orange: #f4a261;
  --coral: #e76f51;
  --on-ground: #ffffff;
  --on-ground-2: rgba(255, 255, 255, .8);
  --on-ground-3: rgba(255, 255, 255, .66);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* App semantic names, from the brand palette. */
  --surface-2: var(--bg-subtle, #f7f7f6);
  --brand: var(--accent-text, #1d7268);     /* accent as text, links, selected */
  --brand-2: var(--accent, #2a9d8f);        /* accent fills, dots, focus */
  --brand-soft: var(--accent-soft, #e9f5f3);
  --primary: var(--ink, #18181b);           /* primary buttons */
  --primary-hover: var(--ink-hover, #000000);
  --ok: #1d7268;
  --ok-soft: #e9f5f3;
  --warn: #8a5300;
  --warn-soft: #fbf1df;
  --bad: var(--danger, #b42318);
  --bad-soft: var(--danger-soft, #fdeceb);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 4px 16px rgba(24, 24, 27, .06);

  /* Motion scale, the only timing and easing values in the CSS. Arrivals use
     --ease-out (fast start, long settle), exits and loops --ease-in-out,
     --ease-spring only for small pops (a check, a counter), never panels.
     Durations: 1 = press, hover, popover; 2 = small UI (tabs, toasts, menus);
     3 = panels, drawers, modals, steps; 4 = layout moves (FLIP), highlights;
     5 = one authored entrance (stage completion, landing demo beats).
     Animate transform and opacity (clip-path and filter where cheap), never
     layout properties. prefers-reduced-motion turns them all to ~0 below. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1); /* a 3% settle, small pops only */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 720ms;
  --stagger: 24ms;
  --dur-loop: 1.4s; /* one period for every ambient loop (pulse, shimmer) */
  --pulse: color-mix(in srgb, var(--gold) 45%, transparent);
}
/* The base palette and fonts, for a page that loads this file without brand.css
   (brand.css, loaded after, overrides these with the same values). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-var.woff2") format("woff2"); }
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Inter", ui-sans-serif, system-ui, sans-serif;
  --bg: #ffffff;
  --bg-subtle: #f7f7f6;
  --surface: #ffffff;
  --border: #e9e9e7;
  --border-strong: #d6d6d3;
  --text: #18181b;
  --text-2: #52525b;
  --text-3: #6b6b73;
  --ink: #18181b;
  --ink-hover: #000000;
  --accent: #2a9d8f;
  --accent-text: #1d7268;
  --accent-soft: #e9f5f3;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --mark: #e9c46a;
  --wordmark: #18181b;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --stagger: 0ms; }
}