/**
 * Design Tokens
 * Kingshot Alliance Tools Design System
 *
 * CSS custom properties for colors, spacing, radii, shadows, and motion.
 * Dark theme by default, light theme via html[data-theme="light"]
 */

:root {
  /* ========================================
     COLORS - Dark Theme (Default)
     ======================================== */

  /* Backgrounds */
  --bg: #0e1220;
  --panel: #131a2b;
  --surface: #161f33;
  --surface2: #10182a;

  /* Text */
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.70);
  --faint: rgba(255, 255, 255, 0.52);

  /* Brand & Semantic */
  --accent: #7c5cff;
  --accent-hover: #9175ff;
  --accent-active: #6647e6;
  --accent2: #22d3ee;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #fb7185;
  --info: #60a5fa;

  /* Borders & Strokes */
  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-strong: rgba(255, 255, 255, 0.20);
  --focus-ring: rgba(124, 92, 255, 0.50);

  /* ========================================
     SPACING
     ======================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r-full: 9999px;

  /* ========================================
     TOUCH TARGET
     ======================================== */
  --tap: 44px;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

  /* Colored shadows for glows */
  --glow-accent: 0 0 20px rgba(124, 92, 255, 0.3);
  --glow-success: 0 0 20px rgba(52, 211, 153, 0.3);
  --glow-error: 0 0 20px rgba(251, 113, 133, 0.3);

  /* ========================================
     MOTION / TRANSITIONS
     ======================================== */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;

  /* ========================================
     LAYOUT
     ======================================== */
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --container-max: 1200px;
  --breakpoint-desktop: 860px;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
html[data-theme="light"] {
  /* Backgrounds */
  --bg: #f8f9fb;
  --panel: #ffffff;
  --surface: #f0f2f5;
  --surface2: #e5e8ed;

  /* Text - improved contrast for readability */
  --text: rgba(0, 0, 0, 0.90);
  --muted: rgba(0, 0, 0, 0.65);
  --faint: rgba(0, 0, 0, 0.50);

  /* Accent - darker for better contrast on light backgrounds */
  --accent: #5b3bc4;
  --accent-hover: #6b46e5;
  --accent-active: #4a2fa3;

  /* Semantic colors - optimized for light theme contrast */
  --accent2: #0891b2;
  --success: #059669;
  --warning: #d97706;
  --error: #dc2626;
  --info: #2563eb;

  /* Borders & Strokes - stronger for better visibility */
  --stroke: rgba(0, 0, 0, 0.12);
  --stroke-strong: rgba(0, 0, 0, 0.25);
  --focus-ring: rgba(91, 59, 196, 0.50);

  /* Shadows - lighter for light theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.20);

  /* Colored shadows */
  --glow-accent: 0 0 20px rgba(91, 59, 196, 0.25);
  --glow-success: 0 0 20px rgba(5, 150, 105, 0.25);
  --glow-error: 0 0 20px rgba(220, 38, 38, 0.25);
}