/* ============================================================
   TOKENS — Carloman Soluções Visuais (OOH)
   :root + @font-face. Fonte da verdade: 02-design-system/tokens.md
   Fontes servidas nos arquivos reais (.TTF / .otf) — sem .woff2.
   ============================================================ */

:root {
  /* ============================================================
     PALETA BRUTA (marca) — OKLCH calculado a partir do HEX oficial
     ============================================================ */

  /* Vermelho Vibrante  #E91619 — AÇÃO: CTA + números-chave */
  --red-500:        oklch(59.3% 0.234 28.1);   /* #E91619 */
  --red-600:        oklch(52.0% 0.214 27.5);   /* press/hover escuro ~ #C2121A */
  --red-700:        oklch(45.0% 0.190 26.0);   /* press profundo     ~ #9E0F16 */

  /* Bordô Profundo     #4C080E — AUTORIDADE: seções âncora escuras */
  --bordo-900:      oklch(27.1% 0.098 22.8);   /* #4C080E */
  --bordo-950:      oklch(21.0% 0.082 22.0);   /* fundo mais profundo / topo gradiente */
  --bordo-800:      oklch(33.0% 0.108 24.0);   /* borda/divisor sobre bordô */

  /* Verde Vibrante     #00C530 — STATUS: disponível/sucesso (FILL, não texto sobre claro) */
  --green-500:      oklch(71.5% 0.229 144.5);  /* #00C530 */
  /* Verde Floresta     #005616 — texto verde sobre claro + hover do verde */
  --green-700:      oklch(39.4% 0.121 145.8);  /* #005616 */

  /* Neutros */
  --moon:           oklch(91.3% 0.000 89.9);   /* Lua Cheia   #E2E2E2 */
  --ghost:          oklch(97.6% 0.007 268.5);  /* Ghost White #F5F7FC — background base */
  --white:          oklch(100% 0 0);           /* #FFFFFF */
  --ink:            oklch(15.8% 0.022 14.2);   /* Off-black quente #15090A — NUNCA #000 */
  --ink-soft:       oklch(34.0% 0.012 20.0);   /* texto secundário sobre claro */
  --line:           oklch(89.0% 0.004 268 / 1);/* divisor 1px sobre claro */
  --line-strong:    oklch(80.0% 0.006 268 / 1);/* divisor mais visível */

  /* ============================================================
     MAPEAMENTO SEMÂNTICO (use SEMPRE estes nas folhas de estilo)
     ============================================================ */

  /* Superfícies / fundo */
  --bg:             var(--ghost);
  --surface:        var(--white);
  --surface-deep:   var(--bordo-900);
  --surface-deep-2: var(--bordo-950);

  /* Texto */
  --fg:             var(--ink);
  --fg-muted:       var(--ink-soft);
  --fg-on-deep:     var(--white);
  --fg-on-deep-muted: var(--moon);

  /* Marca / ação */
  --brand:          var(--bordo-900);
  --cta:            var(--red-500);
  --cta-hover:      var(--red-600);
  --cta-press:      var(--red-700);
  --cta-fg:         var(--white);
  --accent:         var(--red-500);

  /* Status (verde) — preenchimento, nunca texto verde sobre claro */
  --status-ok:      var(--green-500);
  --status-ok-fg:   var(--green-700);
  --status-ok-on-deep: var(--green-500);

  /* Erro / destrutivo (formulário) */
  --danger:         var(--red-600);
  --danger-fg:      var(--white);

  /* Foco (NUNCA remover) */
  --focus-ring:     var(--red-500);
  --focus-ring-on-deep: var(--white);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Borda / divisor */
  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --border-on-deep: var(--bordo-800);

  /* ============================================================
     TIPOGRAFIA — famílias
     ============================================================ */
  --font-display: "ITC Avant Garde Gothic", "Arial Black", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida (clamp: 375 → 1440). "Poster OOH". */
  --text-label:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* 12 → 13 */
  --text-sm:      clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13 → 14 */
  --text-base:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16 → 18 */
  --text-lg:      clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);   /* 18 → 22 */
  --text-xl:      clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);    /* 22 → 30 */
  --text-2xl:     clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);      /* 28 → 44 */
  --text-3xl:     clamp(2.25rem, 1.6rem + 3vw, 4rem);           /* 36 → 64 */
  --text-hero:    clamp(2.5rem, 1rem + 7vw, 5.5rem);            /* 40 → 88 */
  --text-stat:    clamp(3rem, 1.2rem + 9vw, 7rem);             /* 48 → 112 */

  /* Line-height / tracking */
  --leading-none:   0.95;
  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-body:   1.6;
  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;
  --tracking-stat:  -0.03em;
  --measure:        65ch;

  /* Pesos */
  --fw-book:   400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ============================================================
     ESPAÇAMENTO — base 4px com saltos editoriais
     ============================================================ */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  --space-section: clamp(4rem, 3rem + 5vw, 9rem);
  --gutter:        clamp(1.25rem, 0.8rem + 2vw, 4rem);
  --content-max:   1440px;
  --measure-max:   1180px;

  /* ============================================================
     RADIUS — discreto; poster suíço não é arredondado.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ============================================================
     SOMBRAS — tingidas no tom do fundo (nunca neon/glow)
     ============================================================ */
  --shadow-sm:   0 1px 2px oklch(27% 0.05 23 / 0.08);
  --shadow-md:   0 6px 18px -6px oklch(27% 0.05 23 / 0.14);
  --shadow-lg:   0 18px 40px -16px oklch(27% 0.05 23 / 0.22);
  --shadow-header: 0 1px 0 var(--border), 0 6px 20px -12px oklch(27% 0.05 23 / 0.18);

  /* ============================================================
     MOTION — compositor-friendly (transform/opacity)
     ============================================================ */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Z-index sistêmico */
  --z-header:   100;
  --z-fab:      90;
  --z-overlay:  200;
  --z-menu:     210;

  /* Geometria de header */
  --header-h:        64px;
  --header-h-top:    84px;
  --scroll-margin:   calc(var(--header-h) + var(--space-4));
}

/* prefers-reduced-motion: anula movimento sem quebrar layout */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-normal: 1ms;
    --duration-slow:   1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   @font-face — arquivos reais .TTF / .otf (sem .woff2)
   font-display: swap em todos.
   ============================================================ */

/* ---------- ITC Avant Garde Gothic (institucional / manchetes) ---------- */
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/AVGARDN.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/AVGARDD.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/AVGARDDO.TTF") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Montserrat (UI / corpo) — 4 pesos ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}