/* ===========================================================================
   CinemaXS PWA — Design tokens
   Direção estética: "Neon Marquee Noir"
   Preto de sala escura · âmbar da marca como único acento · ingresso picotado
   =========================================================================== */

:root {
  color-scheme: dark;

  /* ── Cor ────────────────────────────────────────────────────────────────
     O âmbar #FFBE00 sobre o preto #0B0B0C rende 11.8:1 — passa AAA como texto.
     O inverso (preto sobre âmbar) rende os mesmos 11.8:1.
     Branco sobre âmbar rende 1.66:1 — NUNCA usar. Sobre âmbar, texto é --ink. */
  --amber: #ffbe00;
  --amber-hot: #ffd84d;
  --amber-deep: #c78f00;
  --amber-glow: 255 190 0;

  --ink: #0b0b0c;
  --ink-2: #121214;
  --ink-3: #17171a;
  --surface: #1a1a1e;
  --surface-2: #232328;
  --line: #2c2c33;
  --line-strong: #3d3d46;

  --paper: #f4f1ea; /* papel do ingresso impresso */
  --paper-ink: #16150f;

  --text: #f2f1ef;
  --text-2: #a6a5a2; /* 7.6:1 sobre --surface */
  --text-3: #8a8781; /* 4.84:1 sobre --surface — era #726f6b, que reprovava em AA */
  --text-4: #5f5c58; /* só para traços e ícones decorativos, nunca para texto */

  --ok: #3ddc84;
  --warn: #ffb020;
  --danger: #ff5d55;
  --pix: #32bcad;

  /* Tinta dinâmica do filme em cartaz — sobrescrita por JS em cada tela */
  --film: #2c536b;
  --film-vivid: #4d95c1;

  /* ── Tipografia ─────────────────────────────────────────────────────────
     Big Shoulders Display: condensada, industrial — a energia de marquise.
     Archivo: neo-grotesca variável, ótima leitura em pt-BR e sem cara de template.
     Space Mono: números de assento, códigos e horários com textura de bilhete. */
  --font-display: 'Big Shoulders Display', 'Archivo', system-ui, sans-serif;
  --font-text: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0: clamp(0.94rem, 0.91rem + 0.15vw, 1rem);
  --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.8vw, 3.75rem);
  --step-5: clamp(2.9rem, 1.8rem + 5vw, 6rem);

  /* ── Ritmo espacial (escala de 4) ───────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --gutter: clamp(1rem, 4vw, 1.5rem);
  --measure: 62ch;
  --shell: 30rem; /* largura de app mobile; o desktop vira vitrine ao redor */

  /* ── Forma ──────────────────────────────────────────────────────────── */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 24px;
  --r-pill: 999px;

  /* ── Elevação: sombras com intenção narrativa (luz do projetor acima) ── */
  --lift-1: 0 1px 2px rgb(0 0 0 / 0.6);
  --lift-2: 0 6px 20px -6px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.4);
  --lift-3: 0 24px 60px -18px rgb(0 0 0 / 0.85), 0 4px 12px rgb(0 0 0 / 0.5);
  --glow-amber: 0 0 0 1px rgb(var(--amber-glow) / 0.35), 0 6px 28px -8px rgb(var(--amber-glow) / 0.45);

  /* ── Movimento: raro, decidido, curto ───────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  --z-sticky: 40;
  --z-nav: 60;
  --z-sheet: 80;
  --z-toast: 95;
  --z-top: 100;

  /* Safe areas — o app roda em standalone, colado nas bordas do aparelho */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --nav-h: 4.25rem;
}

/* O grão de filme é caro em telas grandes e desnecessário para quem pediu
   menos movimento — as duas condições desligam o efeito, não a estética. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}