/* ==========================================================================
   EULER 1515 — DESIGN SYSTEM
   01. tokens.css — camada de fundação
   --------------------------------------------------------------------------
   Arquitetura em 3 camadas:
     primitivo  →  --eu-blue-800          (valor bruto, sem significado)
     semântico  →  --color-ink            (papel na interface)
     componente →  --btn-height           (uso específico)

   Nunca use um primitivo direto no componente. Sempre passe pelo semântico —
   é o que permite trocar o tema sem reescrever componente.
   ========================================================================== */

:root {
  /* ======================================================================
     PRIMITIVOS — COR
     Extraídos do site oficial. Estes valores não mudam; são a marca.
     ====================================================================== */

  /* Azul — eixo institucional */
  --eu-blue-900: #001936; /* profundidade: scrims, sombras de texto */
  --eu-blue-800: #002a59; /* AZUL MARCA — fundo institucional e tinta */
  --eu-blue-700: #07366a; /* superfície elevada sobre azul */
  --eu-blue-650: #123a6b; /* texto de apoio sobre amarelo */
  --eu-blue-600: #0f3f78; /* meta discreta sobre amarelo */
  --eu-blue-500: #0049c7; /* ROYAL — cor de ação e ênfase */
  --eu-blue-400: #0b5add; /* numeral d'água sobre royal */
  --eu-blue-200: #adc7ef; /* numeração discreta sobre azul */
  --eu-blue-100: #e8f0ff; /* corpo de texto sobre azul */

  /* Ardósia — texto e traços sobre papel */
  --eu-slate-600: #355474; /* corpo de texto secundário no claro */
  --eu-slate-300: #b7c4d6; /* réguas, estados inativos */

  /* Acentos */
  --eu-yellow-500: #fed141; /* AMARELO — destaque, CTA, urgência */
  --eu-green-500: #64cd62; /* VERDE — confirmação, movimento, o "1515" */

  /* Neutros */
  --eu-white: #ffffff;

  /* Alfas — sempre derivados dos primitivos acima */
  --eu-white-a75: rgba(255, 255, 255, 0.75);
  --eu-white-a50: rgba(255, 255, 255, 0.5);
  --eu-white-a35: rgba(255, 255, 255, 0.35);
  --eu-white-a24: rgba(255, 255, 255, 0.24);
  --eu-blue-a40: rgba(0, 42, 89, 0.4);
  --eu-blue-a25: rgba(0, 42, 89, 0.25);
  --eu-blue-a19: rgba(0, 42, 89, 0.19);

  /* ======================================================================
     SEMÂNTICO — COR
     É isto que os componentes consomem.
     ====================================================================== */

  /* Papéis de superfície */
  --surface-paper: var(--eu-white); /* fundo padrão, modo claro */
  --surface-brand: var(--eu-blue-800); /* seção institucional escura */
  --surface-action: var(--eu-blue-500); /* seção de conversão / royal */
  --surface-raised: var(--eu-blue-700); /* card sobre --surface-brand */
  --surface-accent: var(--eu-yellow-500); /* faixa de destaque, citação */
  --surface-affirm: var(--eu-green-500);

  /* Papéis de texto */
  --text-primary: var(--eu-blue-800); /* tinta sobre papel */
  --text-secondary: var(--eu-slate-600); /* apoio sobre papel */
  --text-on-brand: var(--eu-white); /* sobre azul / royal */
  --text-on-brand-soft: var(--eu-blue-100); /* corpo sobre azul */
  --text-on-accent: var(--eu-blue-800); /* sobre amarelo */
  --text-on-accent-soft: var(--eu-blue-650);
  --text-emphasis: var(--eu-yellow-500); /* palavra destacada no escuro */
  --text-emphasis-alt: var(--eu-blue-500); /* palavra destacada no claro */

  /* Papéis de borda */
  --border-on-dark: var(--eu-white-a35);
  --border-on-dark-strong: var(--eu-white-a50);
  --border-on-light: var(--eu-blue-a25);
  --border-rule: var(--eu-slate-300);

  /* Interação */
  --focus-ring: var(--eu-blue-500);
  --focus-ring-on-dark: var(--eu-yellow-500);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ======================================================================
     TIPOGRAFIA
     Duas famílias variáveis. Bricolage grita, Saira explica.
     ====================================================================== */

  --font-display: "Bricolage", "Arial Black", Arial, sans-serif;
  --font-text: "Saira", Arial, Helvetica, sans-serif;

  /* Pesos — Bricolage vai de 200 a 800, Saira de 100 a 900 */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-medium-plus: 750; /* navegação, assinatura de partido */
  --weight-display: 800; /* TODO título usa 800. Sem exceção. */
  --weight-black: 900; /* apenas Saira: botões, kickers, meta */

  /* Escala de tamanho — fluida, sem breakpoint manual */
  --fs-display-1: clamp(3.625rem, 7vw, 6.625rem); /*  58 → 106  hero      */
  --fs-display-2: clamp(3.25rem, 5.8vw, 5.5rem); /*  52 →  88  seção cheia */
  --fs-display-3: clamp(2.625rem, 5.5vw, 4.875rem); /*  42 →  78  seção      */
  --fs-display-4: clamp(2.375rem, 4.5vw, 4.25rem); /*  38 →  68  citação    */
  --fs-title-1: clamp(1.875rem, 3.4vw, 3.375rem); /*  30 →  54  card líder */
  --fs-title-2: clamp(1.5625rem, 2.5vw, 2.625rem); /*  25 →  42  card       */
  --fs-title-3: clamp(1.75rem, 3.2vw, 3.125rem); /*  28 →  50  ano/linha  */
  --fs-title-4: 1.25rem; /*  20        link       */

  --fs-numeral-1: clamp(6.75rem, 12vw, 8.875rem); /* 108 → 142  cédula     */
  --fs-numeral-2: clamp(12rem, 26vw, 24.375rem); /* 192 → 390  marca d'água */
  --fs-numeral-3: clamp(2.375rem, 4.1vw, 4.375rem); /*  38 →  70  índice card */
  --fs-numeral-4: 2.125rem; /*  34        prova/stat  */

  --fs-story: 1.5rem; /*  24  abertura de texto  */
  --fs-lead: 1.125rem; /*  18  linha de apoio     */
  --fs-body: 1rem; /*  16  corpo              */
  --fs-body-lg: clamp(1rem, 1.25vw, 1.1875rem); /* 16→19 corpo fluido */
  --fs-ticker: 0.9375rem; /*  15                     */
  --fs-nav: 0.8125rem; /*  13  nav, botão         */
  --fs-meta: 0.75rem; /*  12  kicker, rodapé     */
  --fs-meta-sm: 0.6875rem; /*  11  rótulo de stat     */
  --fs-micro: 0.625rem; /*  10  tag                */

  /* Entrelinha */
  --lh-display: 0.89; /* títulos grandes colapsam */
  --lh-display-2: 0.9;
  --lh-display-3: 0.98;
  --lh-quote: 1.06;
  --lh-title: 1.02;
  --lh-flat: 1;
  --lh-year: 0.9;
  --lh-story: 1.5;
  --lh-lead: 1.6;
  --lh-body: 1.55;
  --lh-tight: 1.3;

  /* Espaçamento entre letras — negativo no display, positivo no micro */
  --ls-display-1: -0.012em;
  --ls-display-2: -0.018em;
  --ls-quote: -0.015em;
  --ls-title: -0.025em;
  --ls-year: -0.035em;
  --ls-numeral-1: -0.1em;
  --ls-numeral-2: -0.13em;
  --ls-numeral-3: -0.06em;
  --ls-lead: 0.006em;
  --ls-nav: 0.05em;
  --ls-ticker: 0.06em;
  --ls-meta: 0.08em;
  --ls-micro: 0.14em;

  /* ======================================================================
     ESPAÇAMENTO
     Base 4px. Use os degraus; não invente valores no meio.
     ====================================================================== */

  --space-0: 0;
  --space-1: 0.25rem; /*  4 */
  --space-2: 0.5rem; /*  8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-7: 1.875rem; /* 30 */
  --space-8: 2.125rem; /* 34 */
  --space-9: 2.625rem; /* 42 */
  --space-10: 3.25rem; /* 52 */
  --space-11: 4.375rem; /* 70 */
  --space-12: 6.25rem; /* 100 */

  /* Ritmo de página */
  --gutter-page: clamp(1.5rem, 5vw, 4.75rem); /* 24 → 76  — hero, nav, rodapé */
  --gutter-section: clamp(1.5rem, 7vw, 6.875rem); /* 24 → 110 — seções de conteúdo */
  --section-py: var(--space-12);
  --column-gap: 8vw;
  --measure: 56ch; /* largura máxima de leitura confortável */
  --measure-narrow: 44ch;

  /* ======================================================================
     FORMA
     Zero arredondamento. A identidade é o corte diagonal, não o raio.
     ====================================================================== */

  --radius-none: 0;
  --radius-circle: 50%;
  --border-hairline: 1px;
  --rule-timeline: 3px;
  --notch-card: 26px; /* canto cortado do card de bandeira */

  --clip-portrait: polygon(14% 0, 100% 0, 100% 88%, 86% 100%, 0 100%, 0 12%);
  --clip-card: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--notch-card)),
    calc(100% - var(--notch-card)) 100%,
    0 100%
  );
  --clip-ballot: polygon(5% 0, 100% 0, 100% 92%, 94% 100%, 0 100%, 0 7%);

  /* ======================================================================
     ELEVAÇÃO
     Duas linguagens: bloco (offset sólido, cartaz) e névoa (difusa, foto).
     ====================================================================== */

  --shadow-block-affirm: 7px 7px 0 var(--eu-green-500);
  --shadow-block-accent: 14px 14px 0 var(--eu-yellow-500);

  /* Em elemento com clip-path use estes: box-shadow é recortado junto com o
     elemento e simplesmente não aparece. O filtro é aplicado depois do
     recorte, então a sombra sai na silhueta cortada — que é o efeito certo. */
  --drop-block-affirm: drop-shadow(7px 7px 0 var(--eu-green-500));
  --drop-block-accent: drop-shadow(14px 14px 0 var(--eu-yellow-500));
  --shadow-sticker: 0 10px 30px rgba(0, 0, 0, 0.31);
  --shadow-float: 0 14px 34px rgba(0, 12, 32, 0.45);
  --text-shadow-hero: 0 3px 28px rgba(0, 25, 54, 0.4);
  --text-shadow-lead: 0 2px 18px var(--eu-blue-900);

  /* Scrim do hero — dois gradientes cruzados sobre o vídeo */
  --scrim-hero: linear-gradient(
      90deg,
      rgba(0, 25, 62, 0.96) 0%,
      rgba(0, 31, 72, 0.82) 39%,
      rgba(0, 35, 78, 0.34) 68%,
      rgba(0, 22, 53, 0.2) 100%
    ),
    linear-gradient(rgba(0, 22, 54, 0.34) 0%, transparent 62%, rgba(0, 21, 50, 0.7) 100%);

  /* ======================================================================
     MOVIMENTO
     Tudo desacelera. Nada acelera. Sem bounce, sem elastic.
     ====================================================================== */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant: 0.2s; /* hover, cor */
  --dur-fast: 0.4s; /* revelação curta */
  --dur-base: 0.62s; /* entrada de texto */
  --dur-slow: 0.76s; /* retrato, clip-path */
  --dur-slower: 0.9s; /* imagem dentro do retrato */
  --stagger: 80ms; /* atraso entre irmãos */
  --ticker-cycle: 26s;

  /* ======================================================================
     PROFUNDIDADE (z-index)
     ====================================================================== */

  --z-below: 0;
  --z-scrim: 1;
  --z-content: 2;
  --z-overlay: 3;
  --z-nav: 10;
}

/* ==========================================================================
   FONTES
   Variáveis, um arquivo por família. Ajuste o caminho se mover a pasta.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("./fonts/BricolageGrotesque-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira";
  src: url("./fonts/Saira-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}