/**
 * SporeSwaps Modern Design System Tokens & Dynamic Variables
 */

:root, [data-theme="dark"] {
  --color-mode: dark;

  /* Dark Mode Palette */
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-surface-elevated: #21262d;
  --color-surface-hover: #30363d;
  --color-panel-bg: rgba(22, 27, 34, 0.85);
  --color-border: rgba(240, 246, 252, 0.1);
  --color-border-hover: rgba(240, 246, 252, 0.2);

  --color-primary: #7928ca;
  --color-primary-hover: #9333ea;
  --color-primary-glow: rgba(121, 40, 202, 0.35);

  --color-secondary: #00dfd8;
  --color-secondary-hover: #10b981;
  --color-secondary-glow: rgba(0, 223, 216, 0.3);

  --color-text: #f0f6fc;
  --color-text-light: #e6edf3;
  --color-text-muted: #8b949e;
  --color-text-dim: #6e7681;
  --color-input-bg: #21262d;
  --color-card-bg: #161b22;
  --color-card-bg-elevated: #21262d;
  --color-subtle-bg: rgba(255, 255, 255, 0.03);

  /* Status Colors */
  --color-success: #238636;
  --color-success-text: #3fb950;
  --color-warning: #d29922;
  --color-warning-text: #e3b341;
  --color-danger: #da3633;
  --color-danger-text: #f85149;
  --color-info: #1f6feb;
  --color-info-text: #58a6ff;

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

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

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px var(--color-primary-glow);
  --shadow-glow-secondary: 0 0 25px var(--color-secondary-glow);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-height: 72px;
  --max-width: 1320px;
}

/* Automatic Light Mode Adherence */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-mode: light;
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-elevated: #f1f5f9;
    --color-surface-hover: #e2e8f0;
    --color-panel-bg: rgba(255, 255, 255, 0.94);
    --color-border: rgba(15, 23, 42, 0.12);
    --color-border-hover: rgba(15, 23, 42, 0.25);

    --color-primary: #7928ca;
    --color-primary-hover: #6b21a8;
    --color-primary-glow: rgba(121, 40, 202, 0.15);

    --color-secondary: #00897b;
    --color-secondary-hover: #00695c;
    --color-secondary-glow: rgba(0, 137, 123, 0.18);

    --color-text: #0f172a;
    --color-text-light: #0f172a;
    --color-text-muted: #475569;
    --color-text-dim: #64748b;
    --color-input-bg: #ffffff;
    --color-card-bg: #ffffff;
    --color-card-bg-elevated: #f1f5f9;
    --color-subtle-bg: rgba(0, 0, 0, 0.03);

    --color-success: #16a34a;
    --color-success-text: #15803d;
    --color-warning: #d97706;
    --color-warning-text: #b45309;
    --color-danger: #dc2626;
    --color-danger-text: #b91c1c;
    --color-info: #2563eb;
    --color-info-text: #1d4ed8;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px rgba(121, 40, 202, 0.15);
    --shadow-glow-secondary: 0 0 20px rgba(0, 137, 123, 0.15);
  }
}

/* Explicit Light Mode Override */
[data-theme="light"] {
  --color-mode: light;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-elevated: #f1f5f9;
  --color-surface-hover: #e2e8f0;
  --color-panel-bg: rgba(255, 255, 255, 0.94);
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-hover: rgba(15, 23, 42, 0.25);

  --color-primary: #7928ca;
  --color-primary-hover: #6b21a8;
  --color-primary-glow: rgba(121, 40, 202, 0.15);

  --color-secondary: #00897b;
  --color-secondary-hover: #00695c;
  --color-secondary-glow: rgba(0, 137, 123, 0.18);

  --color-text: #0f172a;
  --color-text-light: #0f172a;
  --color-text-muted: #475569;
  --color-text-dim: #64748b;
  --color-input-bg: #ffffff;
  --color-card-bg: #ffffff;
  --color-card-bg-elevated: #f1f5f9;
  --color-subtle-bg: rgba(0, 0, 0, 0.03);

  --color-success: #16a34a;
  --color-success-text: #15803d;
  --color-warning: #d97706;
  --color-warning-text: #b45309;
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-info: #2563eb;
  --color-info-text: #1d4ed8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(121, 40, 202, 0.15);
  --shadow-glow-secondary: 0 0 20px rgba(0, 137, 123, 0.15);
}