/* ==========================================================================
   BELMONT FILMS — Design tokens
   Toda a identidade visual (cores, fontes, espaçamentos, movimento) vive aqui.
   Para ajustar a marca, altere apenas este arquivo.
   ========================================================================== */

/* ---------- Fontes (hospedadas localmente, subset latino com acentos) ---------- */
/* Identidade tipográfica — Opção B "Editorial clássico":
   Inter Tight ExtraBold (monumental) + Newsreader Italic Light (editorial) */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Newsreader: só itálico, peso 300, com tamanho óptico automático (12–72) */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---------- Cores ---------- */
  --c-bg: #0a0a0a;            /* preto de sala de cinema */
  --c-bg-raised: #121211;     /* superfícies levemente elevadas */
  --c-text: #f1ede6;          /* branco quebrado, papel fotográfico */
  --c-text-muted: #8f8a82;    /* legendas, metadados */
  --c-line: rgb(241 237 230 / 0.14);
  --c-accent: #d4452c;        /* vermelho "REC" — usar com parcimônia */
  --c-brand: #a70906;         /* vermelho BELMONT FILMS: tinta das letras da sacola (abertura) — só destaques */

  /* ---------- Famílias ---------- */
  --f-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  /* ---------- Escala tipográfica fluida (mobile → desktop) ---------- */
  --fs-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);   /* metadados */
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);  /* legendas, menu */
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* texto corrido */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);       /* lead */
  --fs-xl: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);       /* subtítulos */
  --fs-2xl: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);        /* manifesto */
  --fs-3xl: min(16vw, 16rem);                             /* títulos de seção */
  /* "BELMONT" ocupa exatamente a largura útil (4.45 = largura da palavra em em,
     medida na Inter Tight 800). 100cqi = largura do container .hero__content.
     O limite por altura só atua em telas muito largas e baixas. */
  --fs-hero: min(calc(100cqi / 4.45), 42svh);

  /* ---------- Espaçamento ---------- */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);            /* margem lateral */
  --gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.75rem);         /* entre colunas */
  --space-section: clamp(6rem, 4rem + 10vw, 14rem);       /* entre seções */
  --header-h: clamp(3.75rem, 3.4rem + 1.2vw, 4.75rem);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);              /* desaceleração "de câmera" */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur-base: 600ms;
  --dur-slow: 1100ms;

  /* ---------- Camadas ---------- */
  --z-header: 50;
  --z-menu: 60;
  --z-ribbon: 70;
}