/**
 * Design tokens — cores, espaçamento, raio, sombra.
 * Tema claro é o padrão; tema escuro é ativado via [data-theme="escuro"].
 */

:root,
[data-theme="claro"] {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;

  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-soft: #eef2ff;
  --color-on-primary: #ffffff;

  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-info: #0284c7;
  --color-info-soft: #e0f2fe;

  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-text-muted: #64748b;
  --sidebar-active-bg: rgba(99, 102, 241, 0.18);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.28);
}

[data-theme="escuro"] {
  --color-bg: #0b1120;
  --color-surface: #131b2e;
  --color-surface-2: #0f1524;
  --color-border: #263149;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;

  --color-primary: #6366f1;
  --color-primary-hover: #818cf8;
  --color-primary-soft: rgba(99, 102, 241, 0.16);
  --color-on-primary: #ffffff;

  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.16);
  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.16);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.16);
  --color-info: #38bdf8;
  --color-info-soft: rgba(56, 189, 248, 0.16);

  --sidebar-bg: #070b14;
  --sidebar-text: #cbd5e1;
  --sidebar-text-muted: #64748b;
  --sidebar-active-bg: rgba(99, 102, 241, 0.24);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

:root {
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sidebar-width: 248px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;

  --transition: 0.15s ease;
}