/* ============================================
   FUNDAMENTOS DO DESENHO — 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:           #EFFF75;   /* Lima — fundo principal da página */
    --cor-tinta:           #1A1A1A;   /* Quase-preto — texto, bordas e sombras */
    --cor-superficie:      #FFFFCC;   /* Creme — fundo de cards */
    --cor-superficie-alt:  #FFFFCC;   /* Creme — fundo de seções alternadas */
    --cor-acento:          #FF6B35;   /* Laranja-coral — CTAs e destaques */
    --cor-apoio:           #005C53;   /* Verde-petróleo — tipografia display secundária */
    --cor-escura:          #2A2A2A;   /* Cinza 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;
}