/* ============================================================
   QUILOMBO URBANO — DESIGN TOKENS
   Paleta pan-africana: preto (fundo), vermelho, amarelo, verde.
   ============================================================ */

:root {
  /* --- Cor: base --- */
  --k-black:        #0D0B0A;   /* fundo principal */
  --k-black-soft:   #17130F;   /* fundo de cartões */
  --k-black-line:   #2A241D;   /* linhas/bordas sutis sobre preto */

  /* --- Cor: acento pan-africano --- */
  --k-red:          #B5222A;   /* vermelho terra/sangue */
  --k-red-deep:     #7A1620;
  --k-yellow:       #E8B923;   /* amarelo dendê */
  --k-yellow-soft:  #F2CE5C;
  --k-green:        #1F6E43;   /* verde mata */
  --k-green-deep:   #144B2D;

  /* --- Cor: texto --- */
  --k-bone:         #F2E9D8;   /* branco-osso, texto sobre preto */
  --k-bone-dim:     #C9BFAE;   /* texto secundário */
  --k-ink:          #14110D;   /* texto sobre fundos claros/amarelo */

  /* --- Tipografia --- */
  --f-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --f-body:    "Space Grotesk", "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", "Courier New", monospace;

  /* --- Escala --- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.6vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3vw, 5rem);
  --step-5:  clamp(3.6rem, 2.4rem + 5vw, 7.2rem);

  /* --- Espaçamento --- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.4rem;
  --sp-7: 9.6rem;

  /* --- Layout --- */
  --maxw: 1180px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  /* --- Sombra / elevação (sobre fundo escuro) --- */
  --shadow-1: 0 1px 0 rgba(242,233,216,0.06) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-2: 0 20px 60px rgba(0,0,0,0.55);

  /* --- Movimento --- */
  --ease-out: cubic-bezier(.16,.8,.24,1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}