/* ============================================
   DESIGN TOKENS — Stedia × Unitel
   ============================================ */

:root {
  /* Dark theme (default) */
  --surface-0: #050628;
  --surface-1: #0E0F3D;
  --surface-2: #1E1F5C;
  --primary: #01963A;
  --primary-light: #A1D885;
  --accent: #00C1D5;
  --accent-secondary: #7F7CFF;
  --text-primary: #F0F1F7;
  --text-secondary: #9B9DB8;
  --positive: #22C55E;
  --negative: #EF4444;
  --warning: #F59E0B;

  /* Gradient signature */
  --gradient-signature: linear-gradient(66deg, #00C1D5, #1E1F5C, #070841);
  --gradient-hero: linear-gradient(66deg, #00C1D5 0%, #1E1F5C 40%, #070841 100%);

  /* Data series palette */
  --series-1: #00C1D5;
  --series-2: #01963A;
  --series-3: #7F7CFF;
  --series-4: #F59E0B;
  --series-5: #EF4444;
  --series-6: #A1D885;

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 3rem;       /* 48px */
  --text-kpi: 4.5rem;     /* 72px */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;
  --transition-chart: 800ms ease-out;

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed: 64px;
  --content-max: 1200px;
  --content-narrow: 720px;
}

/* Light theme */
[data-theme="light"] {
  --surface-0: #FFFFFF;
  --surface-1: #F7F8FA;
  --surface-2: #ECEEF2;
  --primary: #285F41;
  --primary-light: #A1D885;
  --accent: #0097A7;
  --accent-secondary: #5C5ADB;
  --text-primary: #1A1A2E;
  --text-secondary: #6B6D85;
  --positive: #16A34A;
  --negative: #DC2626;
  --warning: #D97706;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.15);
}