/*
  TOKENS — Nova Home Scuderia Bandeiras
  Mini design system (redesign 2026-09): grid, tipografia, cor, spacing e
  motion como contrato único entre as seções. Cor de marca (#ff4747) medida
  por amostragem de pixel no logo real (Brand/1124_Bandeiras_RGB_L-RW.png).
*/

@layer tokens {
  :root {
    /* ===== SUPERFÍCIES ESCURAS (padrão da página) ===== */
    --asfalto: #0f0f0f;
    --asfalto-2: #1a1a1a;

    /* ===== SUPERFÍCIE CLARA (mudança de registro — só Bandeiras Empresarial) =====
       Ativada via .section--paper, que também troca --luz/--luz-2/--vermelho/
       --divisor por seus pares claros, então os componentes existentes (botão,
       filete, legenda) se adaptam sem precisar de uma segunda folha de regras. */
    --papel: #f2ede4;
    --papel-2: #e8e0d1;
    --tinta: #16130f;
    --tinta-2: rgba(22, 19, 15, 0.7); /* sobre --papel, ≥4.5:1 */

    /* ===== VERMELHO ===== */
    --vermelho: #ff4747; /* cor real do logo — texto/ícone/botão sobre fundo ESCURO */
    --vermelho-escuro: #c81e1e; /* mesmo matiz, mais escuro — texto/ícone sobre --papel (o vermelho puro reprova AA em fundo claro) */

    /* ===== TEXTO SECUNDÁRIO / DIVISORES ===== */
    --luz: #ffffff;
    --luz-2: rgba(255, 255, 255, 0.76); /* sobre --asfalto, ≥4.5:1 */
    --divisor: rgba(255, 255, 255, 0.12);

    /* ===== TIPOGRAFIA ===== */
    --ff-display: "Special Gothic Condensed One", "Barlow Condensed", sans-serif;
    --ff-text: "Inter", system-ui, sans-serif;

    --t-mega: clamp(3.5rem, 12.8vw, 11.5rem);   /* H1 Hero */
    --t-num: clamp(5rem, 22vw, 18.75rem);       /* numerais de ficha (84/490/300) */
    --t-xxl: clamp(2.75rem, 1.3rem + 6.4vw, 7.5rem);
    --t-xl: clamp(2.25rem, 1.4rem + 4vw, 5rem);
    --t-l: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    --t-m: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); /* lead */
    --t-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); /* nunca <16px */
    --t-small: 0.875rem;
    --t-label: 0.75rem; /* mínimo 12px */

    /* ===== SPACING (base 8, passos fluidos) ===== */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-s: clamp(16px, 4vw, 24px);
    --space-m: clamp(24px, 5vw, 32px);
    --space-l: clamp(32px, 6vw, 48px);
    --space-xl: clamp(48px, 8vw, 96px);
    --space-2xl: clamp(80px, 12vw, 128px);
    --space-3xl: clamp(96px, 15vw, 192px);

    /* Gutter lateral mobile — cresce mais devagar que o container-margin para
       não comer largura útil de texto/imagem em telas estreitas. */
    --gutter: clamp(16px, 5.4vw, 48px);

    /* ===== GRID ===== */
    --container-max: 1440px;
    --container-margin: clamp(16px, 4vw, 64px);
    --container-gutter: clamp(12px, 1.6vw, 24px);

    /* Distância do texto até a borda do viewport nas seções full-bleed
       (.media-split): reproduz o inset visual do .container (padding +
       margem de centralização quando a viewport passa de 1440px), para a
       coluna de texto continuar alinhada ao grid do site mesmo com a
       coluna de imagem quebrando o container até a borda da tela. */
    --content-inset: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--container-margin));

    /* Eixo de conteúdo das seções numeradas. --index-col é a largura da
       coluna exclusiva do numeral (.section-head__index: 2 dígitos tabulares
       ≈ 0.94em em --t-xl + o respiro até o eyebrow). --axis é o recuo que o
       conteúdo usa: 0 por padrão, e vira --index-col só nas seções com
       .section-head a partir de 1024px (ver components.css › EIXO). */
    --index-col: calc(var(--t-xl) * 0.94 + var(--space-m));
    --axis: 0px;

    /* ===== MOTION (contrato único entre design e implementação) ===== */
    --dur-fast: 160ms;
    --dur-medium: 360ms;
    --dur-slow: 720ms;
    --dur-settle: 1100ms; /* exceção: só mídia assentando e contador da Caterham */
    --ease-brake: cubic-bezier(0.22, 1, 0.36, 1); /* entradas — frenagem tardia */
    --ease-drive: cubic-bezier(0.6, 0, 0.2, 1);   /* deslocamentos A→B */
    --ease-trail: cubic-bezier(0.4, 0, 0.7, 0.2); /* saídas — solta o freio */
    --ease-linear: linear;                         /* só quando o scroll É o tempo */

    /* ===== RAIOS ===== */
    --radius: 0; /* 0 em tudo; única forma não-retangular é o corte-r, só em foto */

    color-scheme: dark;
  }
}