/* ──────────────────────────────────────────────────────────────
   Conta Lelê — Brand Tokens
   v1.0 · 2026
   Copie este arquivo em qualquer projeto novo e importe no topo.
   ────────────────────────────────────────────────────────────── */

/* As fontes são carregadas via <link> em includes/cabecalho.php — não importe aqui. */

:root {
  /* ── Cores principais (modo claro amarelo — padrão) ─────────── */
  --cl-bg:        #fdf5d4;   /* creme */
  --cl-bg-2:      #fbe87f;   /* amarelo claro */
  --cl-bg-3:      #ffdc3a;   /* amarelo girassol */
  --cl-ink:       #2b1300;   /* café profundo */
  --cl-ink-dim:   rgba(43, 19, 0, 0.58);
  --cl-accent:    #c4390e;   /* laranja queimado */
  --cl-surface:   #ffffff;
  --cl-border:    rgba(43, 19, 0, 0.08);

  /* Sombras */
  --cl-shadow-sm: 0 2px 6px -2px rgba(43, 19, 0, 0.15);
  --cl-shadow-md: 0 8px 18px -14px rgba(43, 19, 0, 0.18);
  --cl-shadow-lg: 0 20px 40px -20px rgba(43, 19, 0, 0.3);

  /* ── Tipografia ─────────────────────────────────────────────── */
  --cl-font-display: 'Fredoka One', 'Pacifico', cursive;
  --cl-font-ui:      'Nunito', system-ui, sans-serif;

  /* Escala (mobile / desktop) */
  --cl-text-display-xl: 52px;
  --cl-text-h1-m:       32px;
  --cl-text-h1-d:       64px;
  --cl-text-h2-m:       22px;
  --cl-text-h2-d:       42px;
  --cl-text-h3:         18px;
  --cl-text-body:       14px;
  --cl-text-body-d:     16px;
  --cl-text-caption:    12px;
  --cl-text-eyebrow:    11px;

  /* ── Raios ──────────────────────────────────────────────────── */
  --cl-radius-xs: 8px;
  --cl-radius-sm: 12px;
  --cl-radius:    18px;
  --cl-radius-lg: 22px;
  --cl-radius-xl: 24px;
  --cl-pill:      9999px;

  /* ── Espaçamento (4px grid) ─────────────────────────────────── */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 24px;
  --cl-space-6: 32px;
  --cl-space-7: 48px;
  --cl-space-8: 72px;
}

/* ── Tema escuro alternativo (roxo de palco) ──────────────────── */
[data-cl-theme="roxo"] {
  --cl-bg:        #3d0738;
  --cl-bg-2:      #5a0d52;
  --cl-bg-3:      #7b0968;
  --cl-ink:       #ffffff;
  --cl-ink-dim:   rgba(255, 255, 255, 0.62);
  --cl-accent:    #ffdc3a;
  --cl-surface:   rgba(255, 255, 255, 0.08);
  --cl-border:    rgba(255, 255, 255, 0.10);
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
  font-family: var(--cl-font-ui);
  background: var(--cl-bg);
  color: var(--cl-ink);
}

/* As demais regras de componentes ficam em style.css —
   este arquivo é só de tokens. */
.cl-display { font-family: var(--cl-font-display); font-weight: 400; }