/* core/tokens.css — design tokens centralizados.
 *
 * Toda cor, espaçamento, raio, sombra usada pelos componentes vem daqui.
 * Para adicionar um novo tema (alto contraste, sépia, etc.) basta criar
 * um novo seletor `[data-theme="X"]` redefinindo o subconjunto de tokens
 * necessário — não há necessidade de tocar nos arquivos dos componentes.
 *
 * Naming convention:
 *   --color-*     ← paleta crua (raramente usar direto; preferir semânticos)
 *   --surface-*   ← fundos (page/card/elev/subtle/overlay)
 *   --text-*      ← cores de texto
 *   --accent-*    ← cor principal de UI (botões, focus, links)
 *   --border-*    ← divisórias
 *   --status-*    ← feedback (success/warning/danger/info)
 *   --grad-*      ← gradientes (KPI cards, banners)
 *   --shadow-*    ← elevações
 *   --radius-*    ← raios de borda
 *   --space-*     ← espaçamentos (futuro)
 *   --layout-*    ← dimensões estruturais (sidebar, header)
 */

:root {
  /* ── PALETA CRUA (referência interna; componentes devem usar semânticos) ── */
  --color-blue-200:    #90CAF9;
  --color-blue-400:    #42A5F5;
  --color-blue-600:    #1976D2;
  --color-blue-700:    #1565C0;
  --color-indigo-500:  #4361ee;   /* accent real usado nos componentes */
  --color-indigo-550:  #3F51B5;   /* legacy main.css */
  --color-slate-50:    #f8fafc;
  --color-slate-100:   #f1f5f9;
  --color-slate-200:   #e2e8f0;
  --color-slate-400:   #94a3b8;
  --color-slate-500:   #64748b;
  --color-slate-700:   #334155;
  --color-slate-800:   #1e293b;
  --color-slate-900:   #0f172a;
  --color-emerald-400: #34d399;
  --color-amber-400:   #fbbf24;
  --color-red-400:     #f87171;
  --color-red-500:     #ef4444;
  --color-green-600:   #43A047;
  --color-red-600:     #E53935;
  --color-amber-700:   #F57C00;

  /* ── SURFACE — fundos por camada de elevação ── */
  --surface-base:     #EEF2F8;                       /* bg da página */
  --surface-card:     rgba(255,255,255,.75);         /* containers de conteúdo */
  --surface-elev:     rgba(255,255,255,.86);         /* modals, popovers, tooltips */
  --surface-subtle:   rgba(248,250,255,.62);         /* zebra row, hover bg */
  --surface-muted:    rgba(236,241,250,.55);         /* fundos quase invisíveis */
  --surface-overlay:  rgba(8,12,28,.45);             /* backdrop de drawer/modal */
  --surface-page:     #f8fafc;                       /* slate-50 — bg "puro" */
  --surface-strong:   #fff;                          /* containers totalmente opacos */

  /* legacy aliases — manter compat enquanto código antigo não migrou */
  --bg:        var(--surface-base);
  --surface:   var(--surface-card);
  --surface2:  var(--surface-subtle);
  --surface3:  var(--surface-muted);
  --bg-body:   var(--surface-page);

  /* ── TEXT ── */
  --text:           #1A1F36;
  --text-strong:    var(--color-slate-800);          /* headings, KPI numbers */
  --text-muted:     #5F6B7A;
  --text-subtle:    var(--color-slate-400);          /* dicas, placeholders */
  --text-light:     #9EA8B3;
  --text-on-accent: #fff;                            /* texto sobre fundo accent */
  --text-link:      var(--color-blue-700);

  /* legacy aliases */
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);

  /* ── ACCENT — cor principal de UI ── */
  --accent:          var(--color-indigo-500);
  --accent-strong:   #3651cc;                         /* hover/active */
  --accent-hover:    #5571f0;
  --accent-bg:       rgba(67,97,238,.12);            /* bg de itens "active" / chips */
  --accent-bg-subtle:rgba(67,97,238,.07);            /* hover bg sutil */
  --accent-bg-faint: rgba(67,97,238,.05);            /* zebra/listras */
  --accent-border:   rgba(67,97,238,.22);
  --accent-shadow:   rgba(67,97,238,.36);
  --accent-secondary: var(--color-blue-400);         /* highlight secundário */

  /* legacy aliases */
  --color-primary:       var(--color-blue-600);
  --color-primary-dark:  var(--color-blue-700);
  --color-primary-light: var(--color-blue-400);
  --color-accent:        var(--color-indigo-550);

  /* ── BORDERS ── */
  --border:          rgba(63,81,181,.14);
  --border-subtle:   rgba(63,81,181,.08);
  --border-strong:   var(--color-slate-200);
  --border-muted:    rgba(148,163,184,.22);
  --border-on-overlay: rgba(255,255,255,.22);        /* bordas sobre fundo escuro */

  /* legacy */
  --border-dim: var(--border-subtle);

  /* ── STATUS — feedback ── */
  --success:    var(--color-green-600);
  --success-bg: rgba(67,160,71,.10);
  --warning:    var(--color-amber-700);
  --warning-bg: rgba(245,124,0,.10);
  --danger:     var(--color-red-600);
  --danger-bg:  rgba(229,57,53,.10);
  --info:       var(--color-blue-600);
  --info-bg:    rgba(25,118,210,.10);

  /* legacy */
  --color-positive: var(--success);
  --color-negative: var(--danger);
  --color-warning:  var(--warning);

  /* ── TABLE-specific ── */
  --th-bg:     rgba(25,118,210,.07);
  --th-color:  var(--color-blue-700);
  --row-even:  rgba(248,250,255,.55);
  --row-hover: rgba(63,81,181,.08);
  --total-row: rgba(25,118,210,.09);

  /* ── GLASS effect ── */
  --lg-blur:      20px;
  --lg-blur-lg:   32px;
  --lg-bg:        rgba(255,255,255,.58);
  --lg-bg-strong: rgba(255,255,255,.86);
  --lg-border:    rgba(255,255,255,.72);
  --lg-shadow:    0 8px 28px rgba(25,118,210,.10), 0 2px 8px rgba(15,22,40,.06);
  --lg-shadow-md: 0 16px 44px rgba(25,118,210,.13), 0 4px 14px rgba(15,22,40,.07);
  --lg-inset:     inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.15);

  /* ── SHADOW — elevações genéricas ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.14);
  --shadow-xl:  0 20px 48px rgba(0,0,0,.18);

  /* ── GRADIENTES (KPI cards + banners) ── */
  --grad-blue:   linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
  --grad-green:  linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
  --grad-teal:   linear-gradient(135deg, #006064 0%, #00838F 100%);
  --grad-rose:   linear-gradient(135deg, #B71C1C 0%, #C62828 100%);
  --grad-amber:  linear-gradient(135deg, #E65100 0%, #F57C00 100%);
  --grad-purple: linear-gradient(135deg, #4527A0 0%, #6A1B9A 100%);

  --banner-blue:   linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
  --banner-green:  linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
  --banner-amber:  linear-gradient(135deg, #E65100 0%, #F57C00 100%);
  --banner-rose:   linear-gradient(135deg, #B71C1C 0%, #E53935 100%);
  --banner-purple: linear-gradient(135deg, #4527A0 0%, #7B1FA2 100%);
  --banner-indigo: linear-gradient(135deg, #283593 0%, #3949AB 100%);

  /* ── RADIUS ── */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ── LAYOUT — dimensões estruturais ── */
  --font:                'Inter', sans-serif;
  --sidebar-w:           240px;
  --sidebar-collapsed-w: 64px;
  --header-h:            64px;
}


/* ══════════════════════════════════════════════════════════════
   DARK THEME — overrides
════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Surfaces */
  --surface-base:    #0f172a;
  --surface-card:    rgba(30,41,59,.88);
  --surface-elev:    rgba(15,23,42,.94);
  --surface-subtle:  rgba(15,23,42,.72);
  --surface-muted:   rgba(30,41,59,.55);
  --surface-page:    #1e2d42;
  --surface-strong:  #1e293b;

  /* legacy */
  --bg:       var(--surface-base);
  --surface:  var(--surface-card);
  --surface2: var(--surface-subtle);
  --surface3: var(--surface-muted);
  --bg-body:  var(--surface-page);

  /* Text */
  --text:           #f1f5f9;
  --text-strong:    var(--color-slate-100);
  --text-muted:     var(--color-slate-400);
  --text-subtle:    var(--color-slate-500);
  --text-light:     var(--color-slate-500);
  --text-link:      var(--color-blue-200);

  /* Borders */
  --border:        rgba(148,163,184,.14);
  --border-subtle: rgba(148,163,184,.08);
  --border-strong: rgba(148,163,184,.22);
  --border-muted:  rgba(148,163,184,.16);

  /* Glass */
  --lg-bg:        rgba(30,41,59,.68);
  --lg-bg-strong: rgba(15,23,42,.94);
  --lg-border:    rgba(148,163,184,.16);
  --lg-shadow:    0 8px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
  --lg-shadow-md: 0 16px 44px rgba(0,0,0,.42), 0 4px 14px rgba(0,0,0,.25);
  --lg-inset:     inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.02);

  /* Table */
  --th-bg:     rgba(148,163,184,.07);
  --th-color:  var(--color-blue-200);
  --row-even:  rgba(30,41,59,.38);
  --row-hover: rgba(63,81,181,.15);
  --total-row: rgba(25,118,210,.14);

  /* Accent — bg variants ficam mais fortes em dark */
  --accent-bg:        rgba(67,97,238,.18);
  --accent-bg-subtle: rgba(67,97,238,.10);
  --accent-bg-faint:  rgba(67,97,238,.06);
  --accent-border:    rgba(67,97,238,.28);
}