/* ============================================================================
 * design-tokens.css — Kimbanda Almas e Trevas
 * Estilo MODERNO e DARK (decisão do dono, 2026-11-08): cinzas escuros, fonte Inter,
 * vermelho-sangue só como acento. Letra gótica (Grenze Gotisch) só no logo/título
 * principal (--fonte-display). Nomes das variáveis mantidos (osso, sangue…).
 * ============================================================================ */

:root {
  /* ── Base / fundos ───────────────────────────────────────── */
  --bg:        #0d0f13;   /* fundo dark neutro */
  --bg-2:      #111318;   /* fundo alternado */
  --surface:   #15181e;   /* cartões / blocos */
  --surface-2: #1c2027;   /* cartões elevados */
  --linha:     rgba(255, 255, 255, .08);  /* hairline */
  --linha-osso: rgba(255, 255, 255, .12);

  /* ── Sangue (acento principal) ───────────────────────────── */
  --sangue:        #8b0e0e;   /* vermelho-sangue escuro */
  --sangue-vivo:   #d23c3c;   /* acento */
  --sangue-brasa:  #e5554d;   /* hover */
  --sangue-glow:   rgba(210, 60, 60, .22);

  /* ── Osso (texto / claros) ───────────────────────────────── */
  --osso:      #e8eaee;   /* texto principal */
  --osso-dim:  #a4abb7;   /* texto secundário */
  --osso-mute: #6f7683;   /* texto apagado */
  --cinza-fundo: #3a3f48;

  /* ── Semânticos ──────────────────────────────────────────── */
  --texto:        var(--osso);
  --texto-suave:  var(--osso-dim);
  --acento:       var(--sangue-vivo);
  --acento-forte: var(--sangue-brasa);

  /* ── Tipografia ──────────────────────────────────────────── */
  --fonte-display: 'Grenze Gotisch', serif;                              /* SÓ logo/título principal */
  --fonte-label:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* rótulos */
  --fonte-corpo:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* corpo */

  /* ── Métrica ─────────────────────────────────────────────── */
  --raio:      8px;
  --raio-lg:   12px;
  --gutter:    clamp(16px, 5vw, 64px);
  --maxw:      1180px;
  --sombra:    0 16px 40px rgba(0,0,0,.45);
  --sombra-sangue: 0 0 40px var(--sangue-glow);
}

/* ====== Reset enxuto ====== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Fundo: dark neutro com um brilho vermelho bem discreto no topo */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(210,60,60,.08), transparent 55%),
    var(--bg);
}

/* ====== Tipos utilitários ====== */
.display { font-family: var(--fonte-display); font-weight: 700; line-height: 1.02; }
.label {
  font-family: var(--fonte-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--acento);
}
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Divisória sangue */
.hr-sangue {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--sangue), var(--sangue-vivo), var(--sangue), transparent);
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
 * COMPAT com o código legado das páginas internas (nomes de variável
 * antigos), mas com a
 * paleta do Almas: o que era OURO vira OSSO; o que era vermelho vira SANGUE.
 * Código novo do Almas deve usar os tokens de cima, não estes.
 * ============================================================================ */
:root {
  --vermelho:        var(--sangue);
  --vermelho-vivo:   var(--sangue-vivo);
  --ouro:            var(--osso);
  --ouro-claro:      #ffffff;
  --preto:           var(--bg);
  --preto-suave:     var(--bg-2);
  --fumo:            var(--surface);
  --texto-fraco:     var(--osso-dim);
  --texto-fantasma:  rgba(164,171,183,.45);

  --ok: #6dbf6d;  --ok-bg: rgba(45,106,45,.12);  --ok-border: rgba(109,191,109,.35);
  --erro: #e87a7a; --erro-bg: rgba(139,14,14,.18); --erro-border: rgba(195,32,42,.45);
  --aviso: #e8b84a; --info: #7aaeff;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius-sm: 3px; --radius: var(--raio); --radius-lg: var(--raio-lg); --radius-xl: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow:    0 6px 22px rgba(0,0,0,.5);
  --shadow-lg: var(--sombra);
  --glow-ouro: var(--sombra-sangue);

  --font-display: var(--fonte-display);
  --font-titulo:  var(--fonte-label);
  --font-corpo:   var(--fonte-corpo);
  --font-leitura: var(--fonte-corpo);
  --fs-xs: .86rem; --fs-sm: .95rem; --fs-base: 1.05rem; --fs-md: 1.15rem;
  --fs-lg: 1.3rem; --fs-xl: 1.55rem; --fs-2xl: 2.05rem; --fs-3xl: clamp(1.7rem, 5vw, 2.9rem);

  --z-conteudo: 1; --z-navbar: 200; --z-overlay: 800; --z-modal: 9000; --z-toast: 9500; --z-protecao: 9999;
  --t-rapido: .15s; --t-padrao: .25s; --t-lento: .4s; --easing: cubic-bezier(.4, 0, .2, 1);

  /* aliases curtos do admin/login antigos */
  --vm: var(--vermelho); --vv: var(--vermelho-vivo);
  --ou: var(--ouro);     --oc: var(--ouro-claro);
  --pr: var(--preto);    --fu: var(--preto-suave);
  --os: var(--texto);    --oe: var(--texto-fraco);
  --sb: 255px;
  --osso-escuro: var(--texto-fraco);
  --cinza: #262a32;
}