/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Jhonatan Lopes
   Variáveis globais usadas em todas as páginas.
   Importe este arquivo PRIMEIRO em qualquer página.
═══════════════════════════════════════════════════════════ */

:root {
  /* ───── Cores por especialidade (acentos) ───── */
  --c-front:  #2F6BF6;   /* Frontend / Tecnologia — azul */
  --c-tattoo: #C01F3E;   /* Tatuagem — vermelho terra */
  --c-aqua:   #1E9C9C;   /* Aquarela — verde-teal */
  --c-film:   #E0A02E;   /* Filme / Videomaker — âmbar */

  /* Variantes do acento ativo (override por página em main.css) */
  --accent: var(--c-front);
  --accent-2: #5B8Cff;
  --accent-deep: #1B49B8;

  /* Cores utilitárias */
  --green:   #0CCE6B;    /* sucesso, métricas, badges positivos */
  --green-2: #13a85c;
  --red:     #E0594B;    /* erro / alerta */
  --whatsapp:#25D366;

  /* ───── Tipografia ───── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ───── Spacing scale ───── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 20px;
  --sp-5: 30px;
  --sp-6: 44px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 140px;

  /* ───── Radii ───── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 100px;

  /* ───── Container ───── */
  --container: 1200px;
  --container-px: 38px;

  /* ───── Z-index ───── */
  --z-nav: 100;
  --z-overlay: 9000;
  --z-modal: 9100;
}

/* ───── Tema escuro (DEFAULT) — "Tinta" ───── */
html[data-theme="dark"] {
  --bg:    #0B0C12;          /* fundo principal */
  --bg2:   #15161F;          /* fundo secundário (cards, inputs) */
  --panel: #15161F;          /* painéis */
  --line:  #272834;          /* bordas visíveis */
  --hair:  rgba(236,232,221,.10); /* bordas sutis (fios) */
  --fg:    #ECE8DD;          /* texto principal */
  --dim:   #8A897F;          /* texto secundário */
  --field: #0e0f17;          /* fundo de inputs */
}

/* ───── Tema claro — "Papel" ───── */
html[data-theme="light"] {
  --bg:    #F4F0E7;
  --bg2:   #EAE4D6;
  --panel: #ffffff;
  --line:  #DACFBC;
  --hair:  rgba(25,25,33,.10);
  --fg:    #191921;
  --dim:   #6B695F;
  --field: #ffffff;
}