/*
  Design tokens — reproduced from the unu product design system
  (DESIGN.md — "The Dark Theatre" — and PRODUCT.md brand voice).

  Doctrine, in one line: chrome is achromatic; the only saturated color on
  screen comes from cover art / screenshots. Depth comes from the layered
  black ramp, not shadows. One loud focus state: grow + solid white ring.
*/

:root {
  /* ---- Color ramp (Theatre Black -> Panel -> Card) ---- */
  --u-surface: #000000;
  --u-panel: #121212;
  --u-card: #151515;
  --u-card-2: #1a1a1a;

  --u-ink: #ffffff;
  --u-muted: #b8b8b8;
  --u-muted-dim: rgba(255, 255, 255, 0.45);
  --u-muted-dimmer: rgba(255, 255, 255, 0.25);

  /* Accent defaults to white (achromatic); user-tunable in the real app */
  --u-accent: #ffffff;
  --u-accent-ink: #0b0e14;
  --u-focus-ring: #ffffff;
  --u-danger: #d9534f;

  /* The one sanctioned brand-color moment: the app icon blue */
  --u-brand-blue: #1a5fd6;

  /* Missing-art / decorative diagonal */
  --u-void-a: #262626;
  --u-void-b: #050505;

  /* ---- Hairlines ---- */
  --u-line: rgba(255, 255, 255, 0.1);
  --u-line-strong: rgba(255, 255, 255, 0.28);

  /* ---- Radius ---- */
  --u-radius-sm: 0.375rem;   /* 6px */
  --u-radius-md: 0.625rem;   /* 10px */
  --u-radius-pill: 999px;

  /* ---- Spacing ---- */
  --u-sp-1: 0.5rem;
  --u-sp-2: 0.75rem;
  --u-sp-3: 1rem;
  --u-sp-4: 1.5rem;
  --u-sp-5: 2rem;
  --u-sp-6: 2.5rem;
  --u-sp-7: 4rem;
  --u-sp-8: 6rem;
  --u-gutter: 6.25rem; /* 100px TV-safe side gutter, relaxes on small screens */

  /* ---- Elevation (shadowless by doctrine; two functional shadows only) ---- */
  --u-el-focus: 0 1.5rem 3rem rgba(0, 0, 0, 0.65);
  --u-el-lift: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
  --u-el-seam: 0 -1px 0 var(--u-line);

  /* ---- Motion ---- */
  --u-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --u-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --u-dur-1: 120ms;
  --u-dur-2: 200ms;
  --u-dur-3: 340ms;

  /* ---- Type ---- */
  --u-font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --u-fs-display: clamp(2.75rem, 2rem + 3.2vw, 4.6875rem);
  --u-fs-headline: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
  --u-fs-title: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --u-fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --u-fs-body-lg: 1.5rem;
  --u-fs-label: 0.9375rem;
  --u-fs-micro: 0.8125rem;

  --u-lh-display: 1;
  --u-lh-headline: 1.15;
  --u-lh-body: 1.58;

  --u-measure: 61ch;

  /* ---- Z-index ladder ---- */
  --u-z-bg: 0;
  --u-z-base: 1;
  --u-z-raised: 10;
  --u-z-nav: 40;
  --u-z-overlay: 50;
  --u-z-modal: 60;
}

/* Reduced motion: collapse durations to near-instant, keep opacity crossfades */
@media (prefers-reduced-motion: reduce) {
  :root {
    --u-dur-1: 1ms;
    --u-dur-2: 1ms;
    --u-dur-3: 1ms;
  }
}