/* Design tokens for C4 "Night Technicolor" (design: https://claude.ai/artifact/MFCXQbYwnsadc8cPNAFepZ, page
   "System & plan"): a dark auditorium with chunky 3D Technicolor panels. Every other stylesheet reads these, never
   raw values. Three-strip palette: cyan = the Start film, red = the Trick Shot, marigold = the End film and the
   main action. Each colour has a darker "edge" used for the 3D drop (box-shadow: 0 5px 0 <edge>). */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/fredoka-latin.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/fonts/nunito-latin.woff2) format("woff2"); }

:root {
  /* Surfaces: the auditorium */
  --bg: #0d1424;
  --bg-raised: #141d33;
  --bg-card: #18223a;
  --bg-inset: #1e2a46;
  --line: #243050;
  --line-strong: #33426a;

  /* Text */
  --text: #ece6d8;
  --text-2: #a7afc2;
  --text-3: #a7afc2;    /* 4.5:1+ on every surface (axe colour-contrast) */
  --text-inverse: #0d1424;
  --cream: #fff4ea;

  /* Technicolor strips: face + 3D edge */
  --cyan: #1aa6c7;      --cyan-edge: #0f6f86;   --cyan-tint: #12304a;
  --red: #c42d53;       --red-edge: #8a1b39;    --red-tint: #3a1828;   /* deeper than the logo red so cream text passes 4.5:1 */
  --gold: #f2b233;      --gold-edge: #a8740f;   --gold-tint: #3a2e14;
  --green: #2f9e6e;     --green-edge: #1f6e4c;
  --dim: #17304a;       --dim-text: #8fd3e4;    /* unlit Cinerama panel */

  /* Roles (older names kept so every screen reads the new palette) */
  --accent: var(--gold);
  --accent-press: #e0a22a;
  --accent-edge: var(--gold-edge);
  --accent-tint: var(--gold-tint);
  --accent-tint-2: #4a3a17;
  --rival: var(--cyan);
  --rival-tint: var(--cyan-tint);
  --danger: #ff6b86;
  --danger-tint: var(--red-tint);
  --good: #5fd39c;

  /* Tiers: colour AND shape (circle, triangle, diamond, star) */
  --tier-blockbuster: #c9cdd8;
  --tier-blockbuster-bg: #232e4a;
  --tier-cult: var(--gold);
  --tier-cult-bg: var(--gold-tint);
  --tier-deep: #ff8f6b;
  --tier-deep-bg: #3a2220;
  --tier-lost: #b9a4ff;
  --tier-lost-bg: #2a2550;

  /* Type: self-hosted (web/assets/fonts) */
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Fredoka", "Nunito", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-hero: clamp(3rem, 15vw, 4.75rem);

  /* Spacing (4 px grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* 3D panels and buttons */
  --edge: 5px;                      /* drop under a raised button or panel */
  --edge-press: 2px;                /* drop while pressed */
  --panel-shadow: 0 var(--edge) 0 #0a1020, 0 14px 30px rgba(0, 0, 0, .35);
  --perspective: 480px;             /* Cinerama: outer panels rotateY(+-24deg) inside this */
  --cine-angle: 24deg;

  --tap: 44px;
  --col: 480px;           /* phone column width on big screens */
  --tabs-h: 68px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .45);
}

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