/* American DNB design tokens. The one place colours, radii, spacing, type and
   motion are defined; scene/base.html and buildout/landing.html consume them.
   Palette lifted from the AdminCN theme (MIT). */
:root {
  /* colour: dark base */
  --bg: oklch(0.145 0 0);            /* theme --background (dark) */
  --bg-deep: #0e0e0e;                /* wells, inputs on the landing page */
  --surface: oklch(0.205 0 0);       /* card / sidebar */
  --surface-2: oklch(0.269 0 0);     /* muted / secondary */
  --line: oklch(0.27 0 0);           /* solid hairlines */
  --text: oklch(0.985 0 0);
  --text-2: oklch(0.9 0 0);          /* body copy a step down from headings */
  --muted: oklch(0.708 0 0);
  --faint: oklch(0.5 0 0);           /* captions, off lights */
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --scrim: oklch(0 0 0 / 60%);
  /* colour: one accent, one warm highlight for live / now playing */
  --accent: #39ff14;
  --accent-ink: #0e0e0e;
  --warm: #ffb300;
  --warn: var(--warm);
  --danger: oklch(0.704 0.191 22.216);

  /* glass: keep identical to the :global(:root) block in
     apps/buildout/frontend/src/App.svelte (the Svelte app is a separate layer). */
  --glass-bg: rgba(14,14,14,.55);
  --glass-border: 1px solid rgba(255,255,255,.08);
  --glass-blur: blur(14px) saturate(120%);
  --shadow-1: 0 8px 30px rgba(0,0,0,.35);
  --shadow-2: 0 14px 40px rgba(0,0,0,.45);

  /* radius */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* spacing scale (4 px steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* type scale */
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: .66rem;
  --fs-sm: .8rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;

  /* motion */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* layout */
  --sidebar-w: 236px;
  --tabbar-h: 58px;
}