/* =========================================================================
   tokens.css — implementação do sistema de design
   -------------------------------------------------------------------------
   Fonte de verdade: specs/design.md

   Nenhum valor de cor, tamanho de fonte, espaçamento, raio ou duração pode
   ser escrito fora deste arquivo. Se um valor não está aqui, ele não entra
   no CSS — é a regra "precisão de partitura" da §2 do design.md.
   ========================================================================= */

/* ------------------------------------------------------------------ fontes */

/* Space Grotesk — variável 300–700. O CSS só pode usar 600 e 700 (§4). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — o mesmo arquivo variável serve 400 e 600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Itálico apenas em nome de obra musical e citação (§4). */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

  /* --------------------------------------------------------------- cores */
  /* Oficiais da marca: --cor-primaria e --cor-clara. O resto é derivado
     na mesma família de matiz. Contrastes verificados em design.md §3.1. */

  --cor-primaria:          #1287E0;
  --cor-primaria-escura:   #0F70BA;   /* hover e TODO link sobre fundo claro */
  --cor-primaria-suave:    #E2F0FB;

  --cor-escura:            #0A2540;
  --cor-escura-suave:      #143352;

  --cor-clara:             #FFF9F4;
  --cor-clara-alt:         #F9F0E8;
  --cor-branco:            #FFFFFF;

  --cor-apoio:             #B4531F;
  --cor-sucesso:           #1E7A4D;
  --cor-erro:              #B3261E;
  --cor-atencao:           #8A5A00;

  --texto-forte:           #0D1B2A;
  --texto-corpo:           #3B4654;
  --texto-suave:           #5F6B7A;
  --texto-claro:           #FFF9F4;
  --texto-claro-suave:     #B8C7D6;

  --borda-sutil:           #EFE6DC;
  --borda-media:           #8A8F99;
  --borda-escura:          #1E4267;

  /* ---------------------------------------------------------- tipografia */

  --fonte-titulo: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto:  'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Fluidas entre 375px e 1280px de viewport. */
  --txt-display: clamp(2.5rem,    1.775rem + 3.094vw, 4.25rem);
  --txt-h1:      clamp(2rem,      1.482rem + 2.210vw, 3.25rem);
  --txt-h2:      clamp(1.625rem,  1.314rem + 1.326vw, 2.375rem);
  --txt-h3:      clamp(1.3125rem, 1.183rem + 0.553vw, 1.625rem);
  --txt-h4:      clamp(1.125rem,  1.073rem + 0.221vw, 1.25rem);
  --txt-lead:    clamp(1.125rem,  1.047rem + 0.332vw, 1.3125rem);
  --txt-base:    clamp(1rem,      0.974rem + 0.110vw, 1.0625rem);
  --txt-sm:      clamp(0.875rem,  0.849rem + 0.110vw, 0.9375rem);
  --txt-xs:      0.8125rem;
  --txt-numero:  clamp(3rem,      2.275rem + 3.094vw, 4.75rem);

  --entrelinha-display: 1.05;
  --entrelinha-h1:      1.12;
  --entrelinha-h2:      1.2;
  --entrelinha-h3:      1.3;
  --entrelinha-h4:      1.4;
  --entrelinha-lead:    1.6;
  --entrelinha-base:    1.7;

  --peso-regular:  400;
  --peso-medio:    600;
  --peso-forte:    700;

  /* Largura de leitura. Linha longa é o erro tipográfico mais caro (§4). */
  --medida-texto:    65ch;
  --medida-display:  20ch;
  --medida-h2:       28ch;

  /* --------------------------------------------------------- espaçamento */
  /* Escala de base 4px. Nenhum valor fora dela. */

  --esp-1:  0.25rem;   /*   4px */
  --esp-2:  0.5rem;    /*   8px */
  --esp-3:  0.75rem;   /*  12px */
  --esp-4:  1rem;      /*  16px */
  --esp-5:  1.5rem;    /*  24px */
  --esp-6:  2rem;      /*  32px */
  --esp-7:  3rem;      /*  48px */
  --esp-8:  4rem;      /*  64px */
  --esp-9:  6rem;      /*  96px */
  --esp-10: 8rem;      /* 128px */

  /* Ritmo vertical. Valores de celular; o desktop sobe no media query. */
  --secao-padding:      var(--esp-8);   /*  64px → 96px  */
  --secao-destaque:     5rem;           /*  80px → 128px */
  --secao-cabecalho:    var(--esp-6);   /*  32px → 48px  */
  --grade-gap:          1.25rem;        /*  20px → 32px  */

  /* -------------------------------------------------------------- layout */

  --container:     75rem;    /* 1200px */
  --margem-lateral: 1.25rem; /* 20px → 32px → 48px */
  --header-altura: 4rem;     /* 64px → 80px */

  /* ------------------------------------------------------ bordas e raios */

  --raio-sm:   6px;
  --raio-md:   10px;
  --raio-lg:   16px;
  --raio-xl:   24px;
  --raio-full: 999px;

  --sombra-sutil:   0 1px 2px rgba(10, 37, 64, .06);
  --sombra-card:    0 4px 16px rgba(10, 37, 64, .08);
  --sombra-elevada: 0 12px 32px rgba(10, 37, 64, .14);

  /* ------------------------------------------------------------ movimento */

  --transicao-rapida: 150ms ease-out;
  --transicao-media:  250ms ease-out;
  --transicao-lenta:  400ms cubic-bezier(.2, .7, .3, 1);

  /* Abertura do hero: o vídeo aparece sozinho e o texto entra em cascata
     logo depois. Os dois valores vivem aqui, e não soltos no componente,
     porque a §2 não admite número arbitrário no CSS. A soma do atraso, de
     dois passos e da duração precisa fechar em 0,8s — é o teto acordado
     para o CTA ficar fora de vista (D101). */
  --hero-entrada-atraso: 300ms;   /* quando o h1 começa */
  --hero-entrada-passo:  125ms;   /* intervalo entre h1, subtítulo e botões */

  /* Alvo de toque mínimo (§11 do site.md). */
  --alvo-toque: 2.75rem;  /* 44px */
}

@media (min-width: 48em) {   /* md — 768px */
  :root {
    --margem-lateral: 2rem;   /* 32px */
    --grade-gap:      var(--esp-6);
  }
}

@media (min-width: 64em) {   /* lg — 1024px */
  :root {
    --margem-lateral:   var(--esp-7);   /* 48px */
    --header-altura:    5rem;           /* 80px */
    --secao-padding:    var(--esp-9);   /* 96px */
    --secao-destaque:   var(--esp-10);  /* 128px */
    --secao-cabecalho:  var(--esp-7);   /* 48px */
  }
}