/* ============================================================
   ZARK · Design Tokens — site institucional (single page)
   Origem: extracao-referencia.md (comportamento) + ZARK_BRAND.md (cores/fontes)
   + Magic UI (timings de motion) + Flowbite (shades da lava)
   CONGELA no GATE 2. O build (M4) só consome, nunca redefine.
   ============================================================ */

:root {
  /* ---------- COR (ZARK_BRAND) ---------- */
  --lava:        #F56F10;  /* Liquid Lava: CTAs, accents, glifos, itálicos-chave */
  --lava-dark:   #D45A0D;  /* hover/active de botões e links */
  --lava-light:  #FFF4F0;  /* painéis suaves, highlight */
  --black:       #000000;  /* headlines massivas, fundo do hero dark */
  --ink:         #2A2A2A;  /* texto corpo (warm, nunca cinza-azulado) */
  --gray-panel:  #F5F5F5;  /* painéis alternados (papel do cinza da referência) */
  --hairline:    #E0E0E0;  /* divisórias, linhas de progresso */
  --white:       #FFFFFF;
  --success:     #22C55E;
  --danger:      #EF4444;

  /* Shades da lava (Flowbite generate-theme, brandColor #F56F10) */
  --lava-300:    #FABB8E;  /* claro do border-beam */
  --lava-400:    #F89B59;  /* glow do hero */
  --lava-950:    #3A1D09;  /* profundo do mesh dark */

  /* Texto secundário sobre claro (lead 2-tons, microtexto) */
  --gray-text:   #8A8A86;  /* warm gray, par do ink */

  /* Sombras SEMPRE warm (rgba base 20,17,12) */
  --shadow-card:  0 8px 30px rgba(20, 17, 12, 0.08);
  --shadow-float: 0 16px 48px rgba(20, 17, 12, 0.16);
  /* sem glow: decisão do operador no GATE 2 (2026-07-22) — nenhuma sombra
     colorida/difusa de lava, nenhum radial-gradient de brilho em nenhuma seção */

  /* ---------- TIPOGRAFIA ----------
     Decisão do operador no GATE 2 (2026-07-22): TODA a escrita em Inter.
     Substitui a trinca ZARK_BRAND (Space Grotesk/JetBrains Mono saem). */
  --font-display: 'Inter', sans-serif;  /* headlines/wordmark: pesos 800-900, caps, tracking apertado */
  --font-body:    'Inter', sans-serif;  /* corpo, UI */
  --font-mono:    'Inter', sans-serif;  /* eyebrows/números: Inter 600 caps + tabular-nums */

  /* Escala (comportamento da referência: wordmark gigante, H1 caps, lead grande 2-tons) */
  --text-wordmark: clamp(6rem, 19vw, 22rem);     /* "ZARK" gigante do hero */
  --text-h1:       clamp(2.4rem, 4.6vw, 4.2rem); /* H1 caps do hero */
  --text-lead:     clamp(1.5rem, 2.4vw, 2rem);   /* lead 2-tons que abre seção */
  --text-h3:       1.25rem;
  --text-body:     1rem;
  --text-micro:    0.8125rem;                    /* microtexto cinza dos cards */
  --text-eyebrow:  0.75rem;                      /* caps mono */
  --text-stat:     clamp(2.5rem, 4vw, 3.5rem);   /* números massivos */

  --leading-tight: 1.05;   /* wordmark/H1 */
  --leading-lead:  1.35;
  --leading-body:  1.6;

  --tracking-wordmark: -0.03em;
  --tracking-h1:       -0.01em;
  --tracking-eyebrow:   0.12em;

  /* ---------- RADIUS (comportamento da referência; conflita com brand slides, decidido no GATE 2) ---------- */
  --radius-panel: 32px;    /* painéis de seção */
  --radius-card:  20px;    /* cards internos */
  --radius-float: 16px;    /* cards flutuantes do hero */
  --radius-pill:  9999px;  /* botões */

  /* ---------- ESPAÇAMENTO (ritmo arejado da referência) ---------- */
  --space-section:   clamp(6rem, 10vw, 10rem);  /* respiro entre seções */
  --space-panel-y:   clamp(4rem, 7vw, 6.5rem);  /* padding vertical interno dos painéis */
  --space-panel-x:   clamp(1.5rem, 4vw, 4rem);
  --space-card:      2rem;
  --container-max:   1280px;
  --gutter:          1.5rem;

  /* Grid assimétrico de seção: eyebrow | conteúdo */
  --col-eyebrow: 25%;
  --col-content: 70%;

  /* ---------- MOTION (números portados dos snippets Magic UI) ---------- */
  --marquee-duration: 40s;                        /* Marquee */
  --marquee-gap:      1rem;
  --reveal-duration:  400ms;                      /* Blur Fade */
  --reveal-ease:      ease-out;
  --reveal-delay:     40ms;                       /* 0.04s base */
  --reveal-offset:    6px;
  --reveal-blur:      6px;
  --beam-duration:    6s;                         /* Border Beam */
  --beam-size:        50px;
  --ticker-duration:  1200ms;                     /* Number Ticker (spring aproximado) */
  --hover-duration:   280ms;                      /* hovers gerais (cards, links) */
  --hover-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --btn-duration:     500ms;                      /* 21st button-witn-icon (duration-500) */
  --btn-ease:         cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind transition-all default */
}

/* ============ KEYFRAMES GLOBAIS (portados) ============ */

/* Magic UI Marquee — mesmos números do snippet */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

/* Magic UI Border Beam — offset-path na borda */
@keyframes beam {
  to { offset-distance: 100%; }
}

/* Blur Fade: aplicado via .blur-fade + .visible (IntersectionObserver, once, rootMargin -50px) */
.blur-fade {
  opacity: 0;
  transform: translateY(calc(-1 * var(--reveal-offset)));
  filter: blur(var(--reveal-blur));
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter    var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay);
}
.blur-fade.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .blur-fade { transition: none; opacity: 1; transform: none; filter: none; }
  [class*="marquee"], [class*="beam"] { animation: none !important; }
}