/* ============================================================
   ZAFSEL BILLING — Design Tokens (Light + Dark Theme)
   ============================================================ */
:root {
  /* ── Color Palette ── */
  --hue: 225;
  --accent-h: 225;
  --accent-s: 84%;
  --accent-l: 54%;
  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-hover: hsl(var(--accent-h), var(--accent-s), 46%);
  --accent-light: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
  --accent-gradient: linear-gradient(135deg, hsl(225,84%,54%), hsl(270,72%,56%));
  --accent-gradient-2: linear-gradient(135deg, hsl(225,84%,54%), hsl(180,72%,48%));

  /* ── Light Theme (Default) ── */
  --bg-primary: #f4f6fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef1f8;
  --bg-card: #ffffff;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-sidebar: #ffffff;
  --bg-glass: rgba(255,255,255,0.72);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.1);
  --warning: #d97706;
  --warning-bg: rgba(217,119,6,0.1);
  --danger: #dc2626;
  --danger-bg: rgba(220,38,38,0.1);
  --info: #0ea5e9;
  --info-bg: rgba(14,165,233,0.1);
  --border-color: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 24px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Borders & Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* ── Animation ── */
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-secondary: #181b24;
  --bg-tertiary: #1e222d;
  --bg-card: #1a1e28;
  --bg-hover: rgba(255,255,255,0.06);
  --bg-sidebar: #141720;
  --bg-glass: rgba(20,23,32,0.82);
  --text-primary: #e8ecf4;
  --text-secondary: #a0aec0;
  --text-muted: #6b7a90;
  --text-inverse: #0f172a;
  --border-color: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
}