/* ============================================
   COMPOSIÇÃO & NARRATIVA VISUAL — Design Tokens
   Nomes semânticos: o token diz a FUNÇÃO, não a cor.
   Trocar a paleta = trocar só os 7 valores abaixo.
   ============================================ */

:root {
    /* ---- Paleta (função → valor) ---- */
    --cor-fundo:           #F2856D;   /* Salmão — fundo principal da página */
    --cor-tinta:           #1A1A1A;   /* Quase-preto — texto, bordas e sombras */
    --cor-superficie:      #FFE8B5;   /* Amarelo claro — fundo de cards */
    --cor-superficie-alt:  #FFCE70;   /* Amarelo — fundo de seções alternadas */
    --cor-acento:          #125773;   /* Azul profundo — CTAs e destaques */
    --cor-apoio:           #0E4F5E;   /* Petróleo escuro — display secundário
                                         (a11y: escurecido de #126173 p/ ≥3:1 sobre o salmão) */
    --cor-escura:          #0E4F5E;   /* Petróleo escuro — rodapé e seções escuras */

    /* ---- Tipografia — Controlled chaos ---- */
    --font-display:    'Archivo Black', sans-serif;  /* THE SHOUT */
    --font-body:       'Outfit', sans-serif;          /* The calm */
    --font-script:     'Caveat', cursive;              /* The human hand */

    /* ---- Espaçamento ---- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;

    /* ---- Bordas — Brutal ---- */
    --border: 3px solid var(--cor-tinta);
    --border-thick: 5px solid var(--cor-tinta);
    --shadow: 6px 6px 0px var(--cor-tinta);
    --shadow-lg: 10px 10px 0px var(--cor-tinta);
    --shadow-acento: 6px 6px 0px var(--cor-acento);
    --shadow-apoio: 6px 6px 0px var(--cor-apoio);

    /* ---- Movimento — Punchy ---- */
    --ease-slam: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration: 0.2s;
}