/* ==========================================================================
   Design tokens — version A
   Single source of truth for color, type, space, shape, elevation, motion.
   Rule: components reference tokens only. No raw hex values outside this file
   (exception: poster placeholders generated in JS).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Color roles (all text colors pass WCAG AA on every surface) ---- */
  --bg: #0A0B0F;                 /* page */
  --surface-1: #111318;          /* bars, cards, player pane */
  --surface-2: #181B22;          /* menus, popovers, dialogs, inputs */
  --surface-3: #20242D;          /* hover/pressed on surface-2 */
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --hairline: rgb(255 255 255 / 0.06);

  --text-1: #F2F3F5;             /* primary  17.7:1 on bg */
  --text-2: #A9AFBC;             /* secondary 8.9:1 */
  --text-3: #8A93A3;             /* meta      6.4:1 */
  --text-disabled: #5D6472;      /* only for disabled controls (exempt from contrast) */

  /* One accent, one meaning: primary CTA, selected state, focus ring. Nothing else. */
  --accent: #F5A524;
  --accent-hover: #FFB547;
  --accent-press: #E0941A;
  --on-accent: #1A1204;          /* text on accent: 9.1:1 */
  --accent-soft: rgb(245 165 36 / 0.14);

  /* Semantic tags: text or glyph color only, never large fills */
  --seen: #3DD68C;
  --razzie: #E8899E;
  --info: #7AB8FF;
  --danger: #F87171;

  --scrim: rgb(5 6 9 / 0.72);
  --scrim-strong: rgb(5 6 9 / 0.86);

  /* Ambient color of the current film as "r g b" (set at runtime by features/ambient.js).
     Use as rgb(var(--ambient) / <alpha>). Neutral default so nothing looks broken without it. */
  --ambient: 120 128 145;

  /* ---- Typography: Outfit only ---- */
  --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-12: 0.75rem;  --lh-12: 1rem;       /* micro: meta, counts (floor) */
  --fs-14: 0.875rem; --lh-14: 1.25rem;    /* body small: chips, menus, card titles */
  --fs-16: 1rem;     --lh-16: 1.5rem;     /* body */
  --fs-20: 1.25rem;  --lh-20: 1.75rem;    /* title S */
  --fs-28: 1.75rem;  --lh-28: 2.125rem;   /* title L */
  --fs-40: 2.5rem;   --lh-40: 2.75rem;    /* display (title fallback) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;                          /* display only */

  --tracking-tight: -0.01em;
  --tracking-display: -0.025em;

  /* ---- Space (4-pt scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Shape ---- */
  --radius-sm: 6px;       /* chips, inputs, small buttons */
  --radius-md: 8px;       /* posters */
  --radius-lg: 12px;      /* cards, menus, popovers */
  --radius-xl: 16px;      /* sheets, dialogs */
  --radius-full: 999px;   /* pills, avatars */

  /* ---- Elevation ---- */
  --shadow-hover: 0 10px 28px -10px rgb(0 0 0 / 0.65);
  --shadow-popover: 0 18px 48px -12px rgb(0 0 0 / 0.72), 0 0 0 1px var(--border-strong);
  --shadow-modal: 0 32px 96px -16px rgb(0 0 0 / 0.8), 0 0 0 1px var(--border-strong);
  --blur-backdrop: none;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;      /* press, hover color */
  --dur-hover: 150ms;     /* card lift, reveal actions (owner preference: snappy) */
  --dur-base: 200ms;      /* enter / exit */
  --dur-slow: 300ms;      /* layout, shared-element transitions */

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- Icons ---- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-stroke: 1.75;

  /* ---- Layout ---- */
  --header-h: 56px;
  --filterbar-h: 48px;
  --stage-w: clamp(400px, 36vw, 720px);   /* desktop split: player column width */
  --content-max: 1920px;
  --grid-gap: 20px;
  --grid-min: 156px;                       /* poster size M; S/L override via [data-poster-size] */

  /* ---- Mobile & Safe Area (additive) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --page-x: 16px;
  --hit: 44px;
  --tabbar-h: 0px;
  --nowbar-h: 0px;
  --dock-h: 0px;
  --appbar-h: 0px;
  --tabbar-total: 0px;

  /* ---- Z layers ---- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-popover: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;
}

html.debug-safe {
  --safe-t: 47px;
  --safe-r: 0px;
  --safe-b: 34px;
  --safe-l: 0px;
}

@media (orientation: landscape) {
  html.debug-safe {
    --safe-t: 0px;
    --safe-r: 47px;
    --safe-b: 21px;
    --safe-l: 47px;
  }
}

[data-poster-size="s"] { --grid-min: 124px; --grid-gap: 14px; }
[data-poster-size="m"] { --grid-min: 156px; --grid-gap: 20px; }
[data-poster-size="l"] { --grid-min: 200px; --grid-gap: 24px; }

@media (max-width: 899px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  :root {
    --header-h: 52px;
    --appbar-h: 52px;
    --tabbar-h: 56px;
    --nowbar-h: 56px;
    --tabbar-total: calc(var(--tabbar-h) + var(--safe-b));
    --grid-gap: 10px;
    --grid-min: 100px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --tabbar-h: 44px;
    --nowbar-h: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-hover: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}