/* ==========================================================================
   POUSA FILMS — DESIGN TOKENS
   Fonte da verdade do sistema visual. Nenhum componente deve declarar
   valores literais (hex, px de espaçamento, curvas de easing): tudo aqui.

   Base: Manual de Identidade de Marca (Drave, 2026) + Estratégia de Marca.
   Extensões web (neutros, escalas, motion) documentadas como "derivado".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPOGRAFIA — arquivos locais (variable fonts do brand pack)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ========================================================================
     2. COR — PALETA PRIMITIVA
     Os 4 tons abaixo são os oficiais do manual (RGB / uso digital).
     ======================================================================== */
  --pf-luz: #e5dcb1;     /* Luz     — Pantone 7500 C · destaque, texto sobre escuro */
  --pf-veu: #d4d3b3;     /* Véu     — Pantone 5807 C · superfícies suaves, bordas */
  --pf-oliva: #90926f;   /* Oliva   — Pantone 5773 C · cor de apoio, blocos, hover */
  --pf-bosque: #4e5138;  /* Bosque  — Pantone 7764 C · cor principal, texto, CTA */

  /* NEUTROS — derivados (não constam no manual; necessários para tela).
     Todos carregam o matiz oliva para nunca "esfriar" a marca. */
  --pf-tinta: #232419;   /* preto quente — texto corrido em fundo claro */
  --pf-noite: #11120c;   /* cinematográfico — heros, footer, galeria */
  --pf-papel: #f8f5e9;   /* off-white quente — fundo padrão do site */
  --pf-papel-alto: #fcfbf6;
  --pf-branco: #ffffff;

  /* ESCALAS — derivadas por mistura com branco (50–400) e preto (600–900).
     Use os degraus, não valores avulsos. */
  --pf-luz-50: #fcfcf7;   --pf-luz-100: #f9f7ee;  --pf-luz-200: #f5f1e0;
  --pf-luz-300: #efead0;  --pf-luz-400: #eae3c1;  --pf-luz-500: #e5dcb1;
  --pf-luz-600: #bcb491;  --pf-luz-700: #938d71;  --pf-luz-800: #676350;
  --pf-luz-900: #3c392e;

  --pf-veu-50: #fbfbf7;   --pf-veu-100: #f6f5ee;  --pf-veu-200: #eeede1;
  --pf-veu-300: #e5e5d1;  --pf-veu-400: #dddcc2;  --pf-veu-500: #d4d3b3;
  --pf-veu-600: #aead93;  --pf-veu-700: #888773;  --pf-veu-800: #5f5f51;
  --pf-veu-900: #37372f;

  --pf-oliva-50: #f4f4f1;  --pf-oliva-100: #e7e7df; --pf-oliva-200: #d3d3c5;
  --pf-oliva-300: #bcbea9; --pf-oliva-400: #a6a88c; --pf-oliva-500: #90926f;
  --pf-oliva-600: #76785b; --pf-oliva-700: #5c5d47; --pf-oliva-800: #414232;
  --pf-oliva-900: #25261d;

  --pf-bosque-50: #edeeeb;  --pf-bosque-100: #d8d9d3; --pf-bosque-200: #b8b9af;
  --pf-bosque-300: #959788; --pf-bosque-400: #717460; --pf-bosque-500: #4e5138;
  --pf-bosque-600: #40422e; --pf-bosque-700: #323424; --pf-bosque-800: #232419;
  --pf-bosque-900: #14150f;

  /* ========================================================================
     3. TIPOGRAFIA — FAMÍLIAS, ESCALA, RITMO
     ======================================================================== */
  --fonte-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --fonte-texto: "Google Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida — proporção ~1.22 no mobile, ~1.30 no desktop.
     A marca respira: nada de saltos bruscos, nada de texto apertado. */
  --ts-display-1: clamp(3.25rem, 1.2rem + 8.6vw, 8.5rem);
  --ts-display-2: clamp(2.6rem, 1.3rem + 5.4vw, 5.5rem);
  --ts-display-3: clamp(2.1rem, 1.4rem + 3.1vw, 3.75rem);
  --ts-display-4: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --ts-titulo: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --ts-subtitulo: clamp(1.05rem, 1rem + 0.3vw, 1.1875rem);
  --ts-corpo-g: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --ts-corpo: 1rem;
  --ts-corpo-p: 0.9375rem;
  --ts-legenda: 0.8125rem;
  --ts-rotulo: 0.6875rem;

  --lh-display: 1.02;
  --lh-titulo: 1.2;
  --lh-corpo: 1.68;   /* generoso: "o tempo desacelera" */
  --lh-compacto: 1.4;

  --tr-display: -0.025em;  /* serifada grande pede aperto */
  --tr-titulo: -0.01em;
  --tr-corpo: 0;
  --tr-rotulo: 0.2em;      /* eyebrow/label em caixa alta */
  --tr-botao: 0.1em;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --medida-texto: 62ch;     /* largura máxima de leitura confortável */
  --medida-texto-curta: 46ch;

  /* ========================================================================
     4. ESPAÇAMENTO — base 8px
     ======================================================================== */
  --e-0: 0;
  --e-1: 0.25rem;   /*  4 */
  --e-2: 0.5rem;    /*  8 */
  --e-3: 0.75rem;   /* 12 */
  --e-4: 1rem;      /* 16 */
  --e-5: 1.5rem;    /* 24 */
  --e-6: 2rem;      /* 32 */
  --e-7: 3rem;      /* 48 */
  --e-8: 4rem;      /* 64 */
  --e-9: 6rem;      /* 96 */
  --e-10: 8rem;     /* 128 */
  --e-11: 10rem;    /* 160 */
  --e-12: 12.5rem;  /* 200 */

  /* Ritmo vertical de seção — fluido */
  --secao-y: clamp(4.5rem, 9vw, 11rem);
  --secao-y-ampla: clamp(6rem, 14vw, 16rem);

  /* ========================================================================
     5. GRADE E LARGURAS
     ======================================================================== */
  --largura-max: 1440px;
  --largura-conteudo: 1160px;
  --largura-estreita: 780px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --grade-colunas: 12;
  --grade-gap: clamp(1rem, 2.2vw, 2rem);

  /* ========================================================================
     6. FORMA — raios derivados do símbolo (arco/asa), não de UI genérica
     ======================================================================== */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;
  /* Arco: topo curvo como a abertura do símbolo. Assinatura da marca. */
  --r-arco: 50% 50% 0 0 / 28% 28% 0 0;
  --r-arco-total: 50% 50% 50% 50% / 28% 28% 28% 28%;
  /* Pétala: usada em selos, avatares e miniaturas */
  --r-petala: 60% 0 60% 0;

  --borda-fina: 1px;
  --borda-media: 2px;

  /* ========================================================================
     7. ELEVAÇÃO — a marca eleva por sobreposição, não por sombra pesada
     ======================================================================== */
  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(35, 36, 25, 0.05), 0 2px 8px rgba(35, 36, 25, 0.04);
  --sombra-2: 0 4px 12px rgba(35, 36, 25, 0.07), 0 12px 32px rgba(35, 36, 25, 0.06);
  --sombra-3: 0 12px 28px rgba(35, 36, 25, 0.10), 0 32px 64px rgba(35, 36, 25, 0.08);
  --sombra-media: 0 24px 60px rgba(17, 18, 12, 0.22);

  /* ========================================================================
     8. MOTION — cadência de cinema: entra devagar, para com precisão
     ======================================================================== */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);      /* saída expo — padrão */
  --ease-cine: cubic-bezier(0.65, 0, 0.35, 1);       /* in-out — transições grandes */
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-saida: cubic-bezier(0.4, 0, 1, 1);

  --dur-instantanea: 120ms;
  --dur-rapida: 240ms;
  --dur-media: 420ms;
  --dur-lenta: 720ms;
  --dur-cine: 1200ms;

  --reveal-distancia: 28px;
  --reveal-escalonamento: 90ms;

  /* ========================================================================
     9. TEXTURA — o granulado é obrigatório na marca (manual, p.19)
     ======================================================================== */
  --grao-opacidade: 0.42;
  --grao-opacidade-forte: 0.7;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  /* Estrela de 4 pontas — "o instante". Bullet, divisor e marcador. */
  --estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2390926f' d='M12 0c.9 6.2 4.9 10.9 12 12-7.1 1.1-11.1 5.8-12 12-.9-6.2-4.9-10.9-12-12C7.1 10.9 11.1 6.2 12 0z'/%3E%3C/svg%3E");

  /* ========================================================================
     10. CAMADAS
     ======================================================================== */
  --z-base: 0;
  --z-media: 10;
  --z-sticky: 100;
  --z-cabecalho: 200;
  --z-menu: 300;
  --z-modal: 400;
  --z-cursor: 500;

  /* ========================================================================
     11. FOCO / ACESSIBILIDADE
     ======================================================================== */
  --foco-cor: var(--pf-bosque);
  --foco-largura: 2px;
  --foco-offset: 3px;
  --alvo-minimo: 44px;   /* área de toque WCAG 2.5.5 */
}

/* ==========================================================================
   12. TOKENS SEMÂNTICOS POR SUPERFÍCIE
   Trocar de fundo é trocar de contexto: os componentes leem apenas os
   tokens semânticos e se re-colorem sozinhos. Nenhum `.btn--branco` existe.
   ========================================================================== */

/* Superfície PAPEL — padrão do site (leitura, propostas, formulários) */
:root,
.pf-sup--papel {
  --sup-fundo: var(--pf-papel);
  --sup-fundo-alt: var(--pf-papel-alto);
  --sup-fundo-suave: var(--pf-luz-200);
  --sup-texto: var(--pf-tinta);            /* 14.4:1 — AAA */
  --sup-texto-medio: var(--pf-bosque);     /*  7.5:1 — AAA */
  --sup-texto-suave: var(--pf-oliva-700);  /*  6.2:1 — AA  */
  --sup-texto-inverso: var(--pf-papel);
  --sup-borda: var(--pf-veu-500);
  --sup-borda-suave: var(--pf-luz-300);
  --sup-borda-forte: var(--pf-bosque);
  --sup-acento: var(--pf-bosque);
  --sup-acento-hover: var(--pf-bosque-600);
  --sup-acento-texto: var(--pf-papel);
  --sup-realce: var(--pf-oliva);
  --sup-foco: var(--pf-bosque);
  --sup-grao-mix: multiply;
}

/* Superfície VÉU — blocos de respiro entre seções claras */
.pf-sup--veu {
  --sup-fundo: var(--pf-veu-300);
  --sup-fundo-alt: var(--pf-veu-200);
  --sup-fundo-suave: var(--pf-veu-400);
  --sup-texto: var(--pf-tinta);
  --sup-texto-medio: var(--pf-bosque);
  --sup-texto-suave: var(--pf-oliva-700);
  --sup-texto-inverso: var(--pf-papel);
  --sup-borda: var(--pf-veu-600);
  --sup-borda-suave: var(--pf-veu-400);
  --sup-borda-forte: var(--pf-bosque);
  --sup-acento: var(--pf-bosque);
  --sup-acento-hover: var(--pf-bosque-600);
  --sup-acento-texto: var(--pf-papel);
  --sup-realce: var(--pf-oliva-700);
  --sup-foco: var(--pf-bosque);
  --sup-grao-mix: multiply;
}

/* Superfície OLIVA — faixas de destaque, CTA intermediário.
   ATENÇÃO: texto branco em oliva dá 3.2:1 → só em tamanho display.
   Texto corrido nesta superfície usa tinta (4.9:1). */
.pf-sup--oliva {
  --sup-fundo: var(--pf-oliva);
  --sup-fundo-alt: var(--pf-oliva-400);
  --sup-fundo-suave: var(--pf-oliva-600);
  --sup-texto: var(--pf-tinta);
  --sup-texto-medio: var(--pf-bosque-800);
  --sup-texto-suave: var(--pf-bosque-700);
  --sup-texto-inverso: var(--pf-luz);
  --sup-borda: var(--pf-oliva-700);
  --sup-borda-suave: var(--pf-oliva-400);
  --sup-borda-forte: var(--pf-bosque-800);
  --sup-acento: var(--pf-bosque-800);
  --sup-acento-hover: var(--pf-noite);
  --sup-acento-texto: var(--pf-luz);
  --sup-realce: var(--pf-luz);
  --sup-foco: var(--pf-bosque-900);
  --sup-grao-mix: overlay;
}

/* Superfície BOSQUE — assinatura da marca: rodapé, blocos de manifesto */
.pf-sup--bosque {
  --sup-fundo: var(--pf-bosque);
  --sup-fundo-alt: var(--pf-bosque-600);
  --sup-fundo-suave: var(--pf-bosque-400);
  --sup-texto: var(--pf-papel);            /*  7.5:1 */
  --sup-texto-medio: var(--pf-luz);        /*  5.9:1 */
  --sup-texto-suave: var(--pf-oliva-200);  /*  5.6:1 */
  --sup-texto-inverso: var(--pf-bosque);
  --sup-borda: var(--pf-bosque-400);
  --sup-borda-suave: var(--pf-bosque-600);
  --sup-borda-forte: var(--pf-luz);
  --sup-acento: var(--pf-luz);
  --sup-acento-hover: var(--pf-luz-300);
  --sup-acento-texto: var(--pf-bosque);
  --sup-realce: var(--pf-luz);
  --sup-foco: var(--pf-luz);
  --sup-grao-mix: overlay;
}

/* Superfície NOITE — cinema: hero com vídeo, galeria de filmes, lightbox */
.pf-sup--noite {
  --sup-fundo: var(--pf-noite);
  --sup-fundo-alt: var(--pf-bosque-900);
  --sup-fundo-suave: var(--pf-bosque-800);
  --sup-texto: var(--pf-papel);            /* 17.2:1 */
  --sup-texto-medio: var(--pf-luz);        /* 13.6:1 */
  --sup-texto-suave: var(--pf-oliva-300);  /*  9.9:1 */
  --sup-texto-inverso: var(--pf-noite);
  --sup-borda: var(--pf-bosque-700);
  --sup-borda-suave: var(--pf-bosque-800);
  --sup-borda-forte: var(--pf-luz);
  --sup-acento: var(--pf-luz);
  --sup-acento-hover: var(--pf-luz-300);
  --sup-acento-texto: var(--pf-noite);
  --sup-realce: var(--pf-oliva-300);
  --sup-foco: var(--pf-luz);
  --sup-grao-mix: overlay;
}