/* ==========================================================
   TOKENS — DJ Helena Duppre
   1º nível: primitivos · 2º nível: semânticos
   Nenhum componente usa hex/px direto — sempre var().
   ========================================================== */

:root {
  /* ---------- primitivos: cor ---------- */
  --preto-950: #0a0a09;
  --preto-900: #121210;
  --cinza-800: #1e1e1b;
  --cinza-700: #2c2c28;
  --cinza-500: #838379;   /* ≥4.5:1 sobre --preto-950 (AA texto pequeno) */
  --cinza-300: #a9a9a1;
  --papel-100: #f0ede6;
  --branco-0:  #ffffff;
  --fogo-500:  #ff3d00;
  --fogo-600:  #d63400;
  --sol-500:   #ffb200;   /* amarelo-sol */
  --rosa-500:  #ff2e7e;   /* rosa-choque */
  --verde-500: #12d17a;   /* verde-brasa */

  /* ---------- primitivos: tipografia ---------- */
  --fonte-display: "Anybody", "Arial Narrow", sans-serif;
  --fonte-texto: "Archivo", "Helvetica Neue", sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --texto-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --display-md: clamp(2rem, 1.4rem + 3vw, 3.85rem);
  --display-lg: clamp(2.5rem, 1.7rem + 4.5vw, 5.75rem);

  /* ---------- primitivos: espaçamento ---------- */
  --esp-1: 0.5rem;    /*  8 */
  --esp-2: 0.75rem;   /* 12 */
  --esp-3: 1rem;      /* 16 */
  --esp-4: 1.5rem;    /* 24 */
  --esp-5: 2.5rem;    /* 40 */
  --esp-6: 4rem;      /* 64 */
  --esp-7: 6rem;      /* 96 */
  --esp-secao: clamp(3.5rem, 2.8rem + 3.5vw, 6rem);

  /* ---------- primitivos: forma & movimento ---------- */
  --raio: 0;                        /* cantos retos: cartaz, não app */
  --borda-fina: 1px;
  --borda-grossa: 3px;
  --transicao-rapida: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-media: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- primitivos: sombra ---------- */
  --sombra-baixa: 0 26px 46px -22px rgba(0, 0, 0, 0.85);
  --sombra-alta: 0 30px 60px -20px rgba(0, 0, 0, 0.9),
                 0 10px 24px -14px rgba(0, 0, 0, 0.7);

  /* ---------- semânticos ---------- */
  --bg: var(--preto-950);
  --bg-elevado: var(--cinza-800);
  --fg: var(--papel-100);
  --fg-suave: var(--cinza-300);
  --fg-apagado: var(--cinza-500);
  --acento: var(--fogo-500);
  --acento-forte: var(--fogo-600);
  --acento-secao: var(--fogo-500);   /* sobrescrito por seção */
  --inverso-bg: var(--papel-100);
  --inverso-fg: var(--preto-950);
  --linha: color-mix(in srgb, var(--papel-100) 18%, transparent);
  --foco: var(--fogo-500);
}