/* ==========================================================================
   ZPlayCine Design Tokens
   Single source of truth for color, typography, spacing, radius, motion.

   ⚠️  FONTE DA VERDADE DA PALETA: packages/design-tokens/colors.json
       (compartilhada com o app Flutter em zplaycine_app/lib/theme/app_colors.dart
       e espelhada no site em produção em website/src/app/globals.css).
       Ao mudar cor de marca, edite o JSON primeiro e reflita aqui.

   O app é dark-only (app_theme.dart define apenas darkTheme, brightness.dark),
   portanto este site também é dark-only — não existe bloco [data-theme="light"].

   Contraste verificado contra o fundo #060D1A (WCAG 2.1):
     #F2F4F0 17.6:1 · #B8C4D4 11.0:1 · #7A8FA6 5.8:1 · #3A85FF 5.5:1 — todos AA.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Color · Surfaces ------------------------------------------------ */
  /* Espelha colors.json → dark.*  */
  --color-bg:              #060d1a;   /* page background — igual ao scaffold do app */
  --color-surface:         #0a1525;   /* cards            — dark.surface  */
  --color-surface-2:       #0f1d33;   /* inputs, hover    — dark.surface2 */
  --color-surface-hover:   #0f1d33;
  --color-surface-3:       #152842;   /* hover forte      — dark.surface3 */
  --color-border:          #1a3055;   /* dark.border      */
  --color-border-strong:   #243d60;   /* dark.borderLight */
  --color-hairline:        rgba(255, 255, 255, 0.08);

  /* Nav: mesmo vidro do site em produção (.glass em globals.css) */
  --color-nav-glass:       rgba(6, 13, 26, 0.78);
  --color-nav-glass-solid: rgba(6, 13, 26, 0.92);
  --color-nav-border:      rgba(255, 255, 255, 0.06);
  --color-menu-bg:         #0a1525;   /* dropdowns — opaco para legibilidade */
  --color-tile-hover:      rgba(255, 255, 255, 0.04);

  /* Gradiente de fundo do app (backgroundGradient: #060D1A → #000000) */
  --gradient-page: linear-gradient(180deg, #060d1a 0%, #03060e 60%, #000000 100%);

  /* ---- Color · Text ---------------------------------------------------- */
  --color-text-primary:    #f2f4f0;   /* colors.json → text.primary   */
  --color-text-secondary:  #b8c4d4;   /* colors.json → text.secondary */
  --color-text-tertiary:   #7a8fa6;   /* colors.json → text.muted     */

  /* ---- Color · Accent -------------------------------------------------- */
  --color-accent:          #3a85ff;   /* colors.json → primary        (5.5:1) */
  --color-accent-bright:   #4a95ff;   /* colors.json → primaryHover          */
  --color-accent-pressed:  #004ff6;   /* colors.json → primaryPressed        */

  /* CTA azul — ÚNICO token que não vem do colors.json, e por um motivo:
     branco sobre o #3A85FF da marca dá só 3,51:1 e reprova WCAG AA em texto
     de 14px. Este é o mesmo azul puxado para o fundo até passar (5,09:1),
     mantendo a família. Se um dia o colors.json ganhar um primaryCta,
     troque por ele. NÃO usar #3A85FF em botão com texto branco. */
  --color-accent-cta:       #1668e3;  /* branco 5,09:1 · fundo da página 3,82:1 */
  --color-accent-cta-hover: #2276f0;

  /* Gradiente de marca (a fita do "Z") — usar com parcimônia */
  --gradient-ribbon: linear-gradient(135deg, #1e90ff 0%, #0050ff 100%);

  /* ---- Color · Status -------------------------------------------------- */
  --color-success:         #00d084;
  --color-warning:         #ffb81c;
  --color-error:           #ff3b30;

  /* ---- Color · Inverse -------------------------------------------------
     CTA primário no padrão documentado do produto: pill off-white com texto
     escuro (globals.css: "estilo Apple — NÃO azul neon"). Bônus de acesso:
     17.6:1, enquanto branco sobre #3A85FF daria 3.5:1 (reprova AA em 14px). */
  --color-fill-inverse:       #f2f4f0;
  --color-fill-inverse-hover: #e3e7df;
  --color-text-inverse:       #060d1a;

  /* ---- Elevation --------------------------------------------------------
     Preservado como estava no site: superfícies flat + hairline, sem sombra
     colorida. Os assets de screenshot já trazem os próprios cantos, então no
     dark o drop-shadow fica transparente (o token existe para o caso de
     virem assets sem sombra embutida).                                    */
  --shadow-nav:   0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-media: drop-shadow(0 22px 40px rgba(0, 0, 0, 0));

  /* ---- Typography ------------------------------------------------------
     Instrument Sans nos títulos + Inter no corpo — o mesmo par do app e do
     site em produção. Auto-hospedadas em assets/fonts/ (ver css/fonts.css),
     com a stack do sistema como fallback: se a fonte não carregar, ou o texto
     estiver num alfabeto que o Instrument Sans não cobre, cai no SF.

     Só a FAMÍLIA veio do app. Escala tipográfica, pesos, tracking, raios,
     espaçamento e motion continuam sendo os do site — não alinhar ao app. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Instrument Sans Variable", var(--font-system);
  --font-body:    "Inter Variable", var(--font-system);
  --font-stack:   var(--font-body);   /* alias legado */

  --text-hero:      clamp(2.75rem, 1rem + 6.1vw, 6rem);        /* 44 → 96 */
  --text-display:   clamp(2.5rem, 1rem + 5.4vw, 5.5rem);       /* 40 → 88 */
  --text-title:     clamp(2rem, 1.25rem + 2.3vw, 3rem);        /* 32 → 48 */
  --text-headline:  clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);  /* 28 → 44 */
  --text-card-title: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);     /* 24 → 32 */
  --text-lede:      clamp(1.1875rem, 0.95rem + 0.9vw, 1.75rem); /* 19 → 28 */
  --text-sub:       clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --text-body:      1.0625rem;                                 /* 17 */
  --text-eyebrow:   1.0625rem;                                 /* 17 */
  --text-label:     clamp(1.125rem, 1rem + 0.45vw, 1.5rem);    /* 18 → 24 */
  --text-caption:   0.875rem;                                  /* 14 */
  --text-nav:       0.875rem;                                  /* 14 — links do menu */

  --leading-hero:     1.06;
  --leading-heading:  1.14;
  --leading-body:     1.47;
  --tracking-hero:    -0.015em;
  --tracking-heading: -0.01em;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:   70.625rem;                 /* 1130px — copy container   */
  --container-wide:  83.25rem;                  /* 1332px — media container  */
  --container-nav:   85rem;                     /* 1360px — nav / hairlines  */
  --gutter:          clamp(1.25rem, 3.75vw, 3.375rem);   /* 20 → 54px       */
  --section-pad:     clamp(4.5rem, 3rem + 6.5vw, 8.25rem); /* 72 → 132px    */

  /* ---- Radius -----------------------------------------------------------
     Escala do SITE — preservada como estava. Os cantos generosos (40/34px)
     são parte da identidade visual desta página e NÃO devem ser achatados
     para a escala do app (AppRadius vai até 24px), que serve a componentes
     de UI densos, não a cartões de landing page.                          */
  --radius-media:  10px;    /* screenshot frames  */
  --radius-card:   40px;    /* step cards         */
  --radius-tile:   34px;    /* source tiles       */
  --radius-badge:  12px;    /* store badges       */
  --radius-pill:   999px;   /* nav bar, buttons   */

  /* ---- Motion -----------------------------------------------------------
     Ritmo original do site — não encurtar para o do app.                  */
  --ease-gentle:   cubic-bezier(0.28, 0.11, 0.32, 1);  /* Apple reveal ease */
  --ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   300ms;
  --duration-medium: 600ms;
  --duration-reveal: 900ms;
  --stagger-step:    80ms;
}