/* ============================================================
   Cookiesoft — Design Tokens
   Identidade "Índigo Autoridade" + logo Smart Cookie
   Use estas variáveis no site, no tema WordPress e em qualquer UI.
   ============================================================ */
:root {
  /* ---- Cor: Marca / Índigo ---- */
  --cs-indigo-900: #0E1430; /* Ink — texto forte / fundos escuros */
  --cs-indigo-800: #14215A;
  --cs-indigo-700: #1B2A6B; /* PRIMÁRIA */
  --cs-indigo-600: #2A41A8;
  --cs-indigo-500: #3A57C9;
  --cs-indigo-100: #E3E7F6;
  --cs-indigo-50:  #EEF1F8; /* Mist — superfícies suaves */

  /* ---- Cor: Acento tech / Ciano ---- */
  --cs-cyan-600: #0EA5CE;
  --cs-cyan-500: #18C8F0; /* ACENTO */
  --cs-cyan-100: #D6F5FD;

  /* ---- Cor: Quente / Âmbar (aceno ao "cookie") ---- */
  --cs-amber-600: #DB8E1E;
  --cs-amber-500: #F4A93C; /* DESTAQUE */
  --cs-amber-100: #FDEBCF;

  /* ---- Neutros ---- */
  --cs-ink:    #0E1430;
  --cs-slate-700: #3C435F;
  --cs-slate-600: #5A6485; /* texto secundário */
  --cs-slate-400: #8A93B2;
  --cs-mist:   #EEF1F8;
  --cs-cloud:  #F7F9FC;   /* fundo de página */
  --cs-white:  #FFFFFF;
  --cs-border: #E2E7F1;

  /* ---- Semânticas ---- */
  --cs-success: #1D9E75;
  --cs-warning: #F4A93C;
  --cs-danger:  #E24B4A;
  --cs-info:    #2A41A8;

  /* ---- Gradiente da marca ---- */
  --cs-gradient: linear-gradient(135deg, #2A41A8 0%, #1B2A6B 100%);
  --cs-gradient-accent: linear-gradient(135deg, #18C8F0 0%, #2A41A8 100%);

  /* ---- Tipografia ---- */
  --cs-font-display: "Poppins", system-ui, sans-serif;
  --cs-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --cs-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --cs-h1: 3rem;     /* 48 */
  --cs-h2: 2.25rem;  /* 36 */
  --cs-h3: 1.75rem;  /* 28 */
  --cs-h4: 1.375rem; /* 22 */
  --cs-body: 1rem;   /* 16 */
  --cs-small: 0.875rem; /* 14 */
  --cs-caption: 0.75rem;/* 12 */
  --cs-leading: 1.7;

  /* ---- Espaçamento (grade 8pt) ---- */
  --cs-space-1: 4px;  --cs-space-2: 8px;  --cs-space-3: 12px;
  --cs-space-4: 16px; --cs-space-5: 24px; --cs-space-6: 32px;
  --cs-space-7: 48px; --cs-space-8: 64px; --cs-space-9: 96px;

  /* ---- Raio ---- */
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-pill: 999px;

  /* ---- Sombra ---- */
  --cs-shadow-sm: 0 1px 2px rgba(14,20,48,.06), 0 1px 3px rgba(14,20,48,.08);
  --cs-shadow-md: 0 4px 12px rgba(14,20,48,.08), 0 2px 4px rgba(14,20,48,.06);
  --cs-shadow-lg: 0 16px 40px rgba(14,20,48,.12);
}