/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — mismo sistema que la app Electron
   Default: dark gris neutro (#111111)
═══════════════════════════════════════════════════════════ */
:root {
  --accent:       #16a34a;
  --accent-hover: #15803d;
  --accent-light: #22c55e;
  --accent-dim:   rgba(22,163,74,.12);
  --accent-glow:  rgba(22,163,74,.25);
  --accent-rgb:   22,163,74;

  --brand-900:#0A3D78;--brand-700:#0D52A0;--brand-500:#1A6EC5;
  --brand-400:#3D8FDF;--brand-200:#5AABF0;--brand-50:rgba(26,110,197,.12);

  --color-success:#22c55e;--color-success-bg:rgba(22,163,74,.12);--color-success-bd:rgba(22,163,74,.30);
  --color-warning:#f59e0b;--color-warning-bg:rgba(245,158,11,.12);--color-warning-bd:rgba(245,158,11,.30);
  --color-danger:#ef4444; --color-danger-bg:rgba(239,68,68,.12); --color-danger-bd:rgba(239,68,68,.30);
  --color-info:var(--brand-400);--color-info-bg:var(--brand-50);

  --bg:#111111;--bg-2:#161616;
  --bg-gradient-start:#111111;--bg-gradient-end:#161616;
  --surface:#191919;--surface-2:#1c1c1c;--surface-3:#202020;
  --sidebar-bg:#101010;--topbar-bg:#111111;
  --modal-bg:rgba(10,10,10,.85);--modal-blur:24px;
  --modal-border:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.11);

  --glass-1:rgba(255,255,255,.02);--glass-2:rgba(255,255,255,.035);
  --glass-3:rgba(255,255,255,.05);--glass-4:rgba(255,255,255,.065);
  --glass-5:rgba(255,255,255,.09);

  --text-1:#f8f8f8;--text-2:#d4d4d4;--text-3:#a0a0a0;--text-4:#6e6e6e;--text-inv:#111111;

  --font-sans:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Cascadia Code',monospace;

  --text-xs:.6875rem;--text-sm:.8125rem;--text-base:.9375rem;
  --text-md:1rem;--text-lg:1.125rem;--text-xl:1.3125rem;
  --text-2xl:1.5625rem;--text-3xl:1.875rem;

  --weight-normal:400;--weight-medium:500;--weight-semi:600;
  --weight-bold:700;--weight-black:800;

  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;

  --radius-xs:2px;--radius-sm:6px;--radius-md:10px;
  --radius-lg:14px;--radius-xl:18px;--radius-full:9999px;

  --shadow-xs:0 1px 3px rgba(0,0,0,.40);
  --shadow-sm:0 2px 8px rgba(0,0,0,.50);
  --shadow-md:0 4px 16px rgba(0,0,0,.60);
  --shadow-lg:0 8px 32px rgba(0,0,0,.70);

  --transition-fast:100ms ease;--transition-base:200ms ease;--transition-slow:300ms ease;

  --sidebar-width:220px;--topbar-height:52px;
}

/* ── Light theme ──────────────────────────────────────── */
:root[data-theme="light"] {
  /* Fondos */
  --bg:#eef0f5;--bg-2:#e4e7ee;
  --bg-gradient-start:#eef0f5;--bg-gradient-end:#e8ecf3;
  /* Superficies */
  --surface:#ffffff;--surface-2:#f4f5f9;--surface-3:#eceef4;
  /* Layout */
  --sidebar-bg:#f7f8fc;--topbar-bg:#ffffff;
  /* Modal */
  --modal-bg:rgba(255,255,255,.96);--modal-blur:20px;
  --modal-border:rgba(0,0,0,.10);
  /* Bordes visibles */
  --border:rgba(0,0,0,.11);--border-2:rgba(0,0,0,.18);
  /* Glass — hover y estados visibles */
  --glass-1:rgba(0,0,0,.02);--glass-2:rgba(0,0,0,.045);
  --glass-3:rgba(0,0,0,.07);--glass-4:rgba(0,0,0,.10);
  --glass-5:rgba(0,0,0,.13);
  /* Textos con contraste WCAG AA */
  --text-1:#111318;--text-2:#363a4a;--text-3:#5e6378;--text-4:#8e93a8;--text-inv:#eef0f5;
  /* Acento */
  --accent-dim:rgba(22,163,74,.13);--accent-glow:rgba(22,163,74,.20);
  /* Sombras suaves */
  --shadow-xs:0 1px 3px rgba(0,0,0,.07);
  --shadow-sm:0 2px 8px rgba(0,0,0,.09);
  --shadow-md:0 4px 16px rgba(0,0,0,.11);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
}