* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #FFC300;
    --primary-dark: #E6A800;
    --primary-ink: #7A5D00;
    --primary-ink-warm: #8A4A00;
    --secondary: #FF8C00;
    --text-dark: #1a1a1a;
    --text-light: #666;
    --bg-light: #fffbf0;
    --border: #f0e0b0;

    /* Superfícies contínuas (contraste calculado com scripts/contrast.js). */
    --night: #100d09;          /* fundo escuro quente */
    --night-2: #1c170f;        /* elevação sobre night */
    --stone: #ece9e3;          /* superfície clara (betão claro) */
    --stone-2: #f6f4f0;        /* cartão sobre stone */
    --ink: #16130e;            /* texto sobre stone: 14.6:1 */
    --ink-muted: #57524a;      /* texto secundário sobre stone: 6.1:1, sobre stone-2: 6.9:1 */
    --on-night: #f2ede4;       /* texto sobre night: 16.6:1 */
    --on-night-muted: #b3aa9b; /* secundário sobre night: 8.4:1, sobre night-2: 7.8:1 */
    --on-night-faint: #8f8676; /* legendas sobre night: 5.4:1 */
    --line-night: rgb(242 237 228 / .12);
    --line-stone: rgb(22 19 14 / .12);
    --caption: #9a9aa0;        /* legendas sobre night: 6.9:1, sobre night-2: 6.4:1 */
    --transition: #4b2e19;     /* tom intermédio escuro âmbar para transição suave */
    --fade-out: 440px;          /* zona longa e suave stone -> night antes do rodapé */
    --transition-length: 200px; /* comprimento da zona de transição em cada lado */

    --bg-dark: var(--night);
    --text-on-dark: var(--on-night);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Escala tipográfica única (razão ~1.25, fluida). */
    --fs-display: clamp(2.5rem, 5.4vw, 4.75rem);
    --fs-h2: clamp(2rem, 3.1vw, 2.75rem);    /* 44px */
    --fs-h3: clamp(1.5rem, 2.2vw, 2rem);      /* 32px */
    --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-caption: .8125rem;
    --lh-tight: 1.08;
    --lh-body: 1.6;
    --measure: 60ch;

    /* Ritmo vertical (grelha de 4px). */
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --section-y: clamp(3.5rem, 6vw, 5.5rem);
    --gutter: clamp(1rem, 4vw, 2rem);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-motion: cubic-bezier(.16, 1, .3, 1); /* curva própria de page-motion.css (--motion-out) */

    --shadow-nav: 0 1px 0 var(--line-night);
    --shadow-card: 0 1px 2px rgb(22 19 14 / .06), 0 12px 32px -12px rgb(22 19 14 / .18);
    --z-nav: 100;

    /* Altura da navegação sticky: alvo de 44px + 2 x .75rem. */
    --nav-height: 68px;
}

html {
    background: var(--night);
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--on-night);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Valores responsivos dos tokens: fonte única (mobile.css só tem overrides de regras, nunca de :root). */
@media (max-width: 768px) {
    :root {
        --gutter: 1.375rem;          /* 22px */
        --section-y: 3.25rem;
        --nav-height: 64px;
        --fs-lead: 1.0625rem;        /* 17px */
        --fs-small: .9375rem;        /* 15px */
        --fs-caption: .875rem;       /* 14px */
        --fs-h2: clamp(1.875rem, 8.2vw, 2.25rem);
        --fs-h3: clamp(1.375rem, 6vw, 1.625rem);
        --fs-display: clamp(2.375rem, 11.5vw, 3rem);
        --bar-h: 72px;               /* barra CTA inferior (mobile.css) */
    }
}

@media (max-width: 380px) {
    :root {
        --gutter: 1.25rem;
    }
}

/* O poster aparece no primeiro frame; quando pronto, o canvas entra por cima em ate 600 ms. */
:where(
    .home-cinema .hero-bg img,
    .page-hero__art--free img,
    .cf-hero__art img,
    .ct-hero__art img,
    .not-found__art img,
    .legal-hero-art img,
    .cookies-hero__poster
) { opacity: 1; transition: opacity .55s ease !important; }
:where(
    .home-hero-canvas,
    .not-found__canvas,
    .hero3d-canvas,
    .cookies-hero__canvas,
    .cf-hero-canvas,
    .ct-hero-canvas,
    .faq-hero-canvas,
    .th-canvas
) { transition: opacity .55s ease !important; }
@media (prefers-reduced-motion: reduce) {
    :where(.home-cinema .hero-bg img,.page-hero__art--free img,.cf-hero__art img,.ct-hero__art img,.not-found__art img,.legal-hero-art img,.cookies-hero__poster),
    :where(.home-hero-canvas,.not-found__canvas,.hero3d-canvas,.cookies-hero__canvas,.cf-hero-canvas,.ct-hero-canvas,.faq-hero-canvas,.th-canvas) { transition: none !important; }
    .home-cinema.is-home-ready .hero-bg img { opacity: 1 !important; }
}

/* A1 (docs/design/FX.md): troca de página com fade nativo do navegador (cross-document view transition),
   <= 180 ms; nenhum clique é interceptado. Movimento reduzido: navegação seca. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}