/* Kala Karma - CSS Custom Properties (Option A: Cyber Slate & Violet) */

:root {
  /* Color Palette - Dark Mode Default */
  --bg-base: #0b0f17;
  --bg-surface: #131b2e;
  --bg-surface-hover: #1c2744;
  --bg-overlay: rgba(11, 15, 23, 0.85);
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(139, 92, 246, 0.3);
  
  --primary-accent: #8b5cf6;
  --primary-hover: #7c3aed;
  --primary-light: rgba(139, 92, 246, 0.15);
  
  --secondary-accent: #38bdf8;
  --secondary-hover: #0284c7;
  --secondary-light: rgba(56, 189, 248, 0.12);
  
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  
  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.15);
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.15);

  /* Glassmorphism & Shadow Tokens */
  --glass-bg: rgba(19, 27, 46, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(16px);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.25);

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-md: 1rem;        /* 16px */
  --font-lg: 1.125rem;    /* 18px */
  --font-xl: 1.375rem;    /* 22px */
  --font-2xl: 1.75rem;    /* 28px */
  --font-3xl: 2.25rem;    /* 36px */

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-speed: 0.2s ease;
  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Spatial Scale */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-12: 3rem;   /* 48px */
}

/* Light Mode Overrides */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-overlay: rgba(248, 250, 252, 0.85);

  --border-subtle: #e2e8f0;
  --border-accent: rgba(124, 58, 237, 0.25);

  --primary-accent: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: rgba(124, 58, 237, 0.1);

  --secondary-accent: #0284c7;
  --secondary-hover: #0369a1;
  --secondary-light: rgba(2, 132, 199, 0.1);

  --text-primary: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;

  --success: #059669;
  --success-light: rgba(5, 150, 105, 0.1);
  --danger: #dc2626;
  --danger-light: rgba(220, 38, 38, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.15);
}