/* ============================================================
   variables.css — Design Tokens & Theme System
   CDR Analytics Panel · FusionPBX
   ============================================================ */

/* ── Dark Theme (default) ────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:         #0b0f18;
  --surface1:   #0f1623;
  --surface:    #121827;
  --surface2:   #182035;
  --surface3:   #1e2840;
  --border:     #253047;
  --border2:    #2e3c58;
  --shadow:     rgba(0,0,0,.5);

  --accent:     #2dd4bf;
  --accent2:    #0d9488;
  --accent-rgb: 45,212,191;

  --green:      #22c55e;
  --red:        #f43f5e;
  --orange:     #f97316;
  --yellow:     #eab308;
  --purple:     #a78bfa;
  --blue:       #60a5fa;

  --green-bg:   rgba(34,197,94,.08);
  --red-bg:     rgba(244,63,94,.08);
  --orange-bg:  rgba(249,115,22,.08);
  --blue-bg:    rgba(96,165,250,.08);
  --purple-bg:  rgba(167,139,250,.08);

  --text:       #e2e8f0;
  --text2:      #94a3b8;
  --text3:      #475569;
  --text-inv:   #0b0f18;

  --topbar-bg:  #0f1623;
  --sidebar-bg: #0f1623;

  --chart-grid: rgba(255,255,255,.04);
  --chart-text: #475569;
}

/* ── Light Theme ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #f1f5f9;
  --surface1:   #ffffff;
  --surface:    #ffffff;
  --surface2:   #f8fafc;
  --surface3:   #f1f5f9;
  --border:     #e2e8f0;
  --border2:    #cbd5e1;
  --shadow:     rgba(0,0,0,.08);

  --accent:     #0d9488;
  --accent2:    #0f766e;
  --accent-rgb: 13,148,136;

  --green:      #16a34a;
  --red:        #e11d48;
  --orange:     #ea580c;
  --yellow:     #ca8a04;
  --purple:     #7c3aed;
  --blue:       #2563eb;

  --green-bg:   rgba(22,163,74,.08);
  --red-bg:     rgba(225,29,72,.08);
  --orange-bg:  rgba(234,88,12,.08);
  --blue-bg:    rgba(37,99,235,.08);
  --purple-bg:  rgba(124,58,237,.08);

  --text:       #0f172a;
  --text2:      #475569;
  --text3:      #94a3b8;
  --text-inv:   #ffffff;

  --topbar-bg:  #ffffff;
  --sidebar-bg: #ffffff;

  --chart-grid: rgba(0,0,0,.04);
  --chart-text: #94a3b8;
}

/* ── Typography Tokens ───────────────────────────────────── */
:root {
  --font-sans:     'Inter',       system-ui, sans-serif;
  --font-heading:  'Montserrat',  system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Cascadia Code', monospace;

  --text-xs:   0.70rem;   /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg:   1.0625rem; /* 17px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Layout */
  --sidebar-w:  272px;
  --topbar-h:   56px;
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Design tokens — spójne wymiary komponentów ── */
  --h-btn-sm:   28px;
  --h-btn:      34px;
  --h-btn-lg:   42px;
  --h-input:    34px;
  --h-input-sm: 28px;

  --px-btn-sm:  10px;
  --px-btn:     14px;
  --px-btn-lg:  20px;
  --px-input:   10px;

  --icon-xs:    12px;
  --icon-sm:    14px;
  --icon-md:    16px;
  --icon-lg:    20px;
  --icon-xl:    24px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.4s ease;
}