/* ==========================================================================
   Color System - OKLCH with Light/Dark Mode Support
   ========================================================================== */

:root {
  /* ========================================================================
     Theme Colors - Light Mode (Default)
     ======================================================================== */
  
  /* Pink theme - Primary */
  --color-pink-50: oklch(97% 0.02 350);
  --color-pink-100: oklch(94% 0.04 350);
  --color-pink-200: oklch(90% 0.08 350);
  --color-pink-300: oklch(82% 0.12 350);
  --color-pink-400: oklch(72% 0.16 350);
  --color-pink-500: oklch(65% 0.18 350);
  --color-pink-600: oklch(58% 0.18 350);
  --color-pink-700: oklch(50% 0.16 350);
  --color-pink-800: oklch(42% 0.14 350);
  --color-pink-900: oklch(35% 0.12 350);

  /* Purple theme */
  --color-purple-50: oklch(97% 0.02 285);
  --color-purple-100: oklch(94% 0.04 285);
  --color-purple-200: oklch(88% 0.08 285);
  --color-purple-300: oklch(78% 0.12 285);
  --color-purple-400: oklch(68% 0.16 285);
  --color-purple-500: oklch(60% 0.18 285);
  --color-purple-600: oklch(52% 0.18 285);
  --color-purple-700: oklch(44% 0.16 285);
  --color-purple-800: oklch(36% 0.14 285);
  --color-purple-900: oklch(28% 0.12 285);

  /* Indigo theme */
  --color-indigo-50: oklch(97% 0.02 265);
  --color-indigo-100: oklch(94% 0.04 265);
  --color-indigo-200: oklch(88% 0.08 265);
  --color-indigo-300: oklch(78% 0.12 265);
  --color-indigo-400: oklch(65% 0.16 265);
  --color-indigo-500: oklch(55% 0.18 265);
  --color-indigo-600: oklch(48% 0.18 265);
  --color-indigo-700: oklch(40% 0.16 265);
  --color-indigo-800: oklch(32% 0.14 265);
  --color-indigo-900: oklch(24% 0.12 265);

  /* Sky theme - Secondary */
  --color-sky-50: oklch(97% 0.01 220);
  --color-sky-100: oklch(94% 0.03 220);
  --color-sky-200: oklch(90% 0.06 220);
  --color-sky-300: oklch(82% 0.09 220);
  --color-sky-400: oklch(72% 0.12 220);
  --color-sky-500: oklch(65% 0.12 220);
  --color-sky-600: oklch(55% 0.12 220);
  --color-sky-700: oklch(45% 0.10 220);
  --color-sky-800: oklch(38% 0.08 220);
  --color-sky-900: oklch(30% 0.06 220);

  /* Cyan */
  --color-cyan-400: oklch(75% 0.12 195);
  --color-cyan-500: oklch(68% 0.12 195);

  /* Amber theme - Accent */
  --color-amber-50: oklch(98% 0.02 85);
  --color-amber-100: oklch(96% 0.04 85);
  --color-amber-200: oklch(92% 0.08 85);
  --color-amber-300: oklch(86% 0.12 85);
  --color-amber-400: oklch(78% 0.16 85);
  --color-amber-500: oklch(75% 0.18 85);
  --color-amber-600: oklch(65% 0.18 65);
  --color-amber-700: oklch(55% 0.16 55);
  --color-amber-800: oklch(45% 0.14 45);
  --color-amber-900: oklch(35% 0.12 35);

  /* Orange */
  --color-orange-400: oklch(75% 0.16 50);

  /* Red - Negative/Error */
  --color-red-50: oklch(97% 0.02 25);
  --color-red-100: oklch(94% 0.04 25);
  --color-red-200: oklch(88% 0.08 25);
  --color-red-400: oklch(65% 0.18 25);
  --color-red-500: oklch(58% 0.20 25);
  --color-red-600: oklch(50% 0.20 25);
  --color-red-700: oklch(42% 0.18 25);

  /* Green - Positive/Success */
  --color-green-50: oklch(97% 0.02 145);
  --color-green-100: oklch(94% 0.04 145);
  --color-green-400: oklch(68% 0.14 145);
  --color-green-500: oklch(60% 0.14 145);
  --color-green-600: oklch(52% 0.14 145);

  /* ========================================================================
     FastRetro Pastel Accents
     ======================================================================== */
  --color-pastel-cream: oklch(97% 0.03 95);
  --color-pastel-yellow: oklch(95% 0.08 95);
  --color-pastel-peach: oklch(93% 0.08 45);
  --color-pastel-pink: oklch(92% 0.1 350);
  --color-pastel-lavender: oklch(92% 0.08 285);
  --color-pastel-blue: oklch(90% 0.08 230);
  --color-pastel-mint: oklch(93% 0.06 165);

  /* ========================================================================
     FastRetro Shadow Colors - Light Mode
     ======================================================================== */
  --color-shadow-light: oklch(20% 0.02 260);
  --color-shadow-dark: oklch(75% 0.08 270);

  /* ========================================================================
     FastRetro Shadow Colors - Dark Mode Accents (VISIBLE!)
     ======================================================================== */
  --color-shadow-dark-default: oklch(55% 0.18 300);
  --color-shadow-dark-pink: oklch(60% 0.22 350);
  --color-shadow-dark-violet: oklch(55% 0.20 285);
  --color-shadow-dark-sky: oklch(50% 0.18 230);
  --color-shadow-dark-amber: oklch(65% 0.20 75);
  
  /* Dark mode border accents */
  --color-border-dark-default: oklch(70% 0.15 300);
  --color-border-dark-pink: oklch(75% 0.20 350);
  --color-border-dark-violet: oklch(70% 0.18 285);
  --color-border-dark-sky: oklch(65% 0.15 230);
  --color-border-dark-amber: oklch(75% 0.18 75);

  /* ========================================================================
     Neutral Colors - Gray Scale
     ======================================================================== */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-50: oklch(98% 0.003 96);
  --color-gray-100: oklch(96% 0.005 96);
  --color-gray-200: oklch(92% 0.008 96);
  --color-gray-300: oklch(87% 0.010 96);
  --color-gray-400: oklch(70% 0.012 96);
  --color-gray-500: oklch(55% 0.012 96);
  --color-gray-600: oklch(45% 0.012 96);
  --color-gray-700: oklch(37% 0.012 96);
  --color-gray-800: oklch(27% 0.010 96);
  --color-gray-900: oklch(20% 0.008 96);
  --color-gray-950: oklch(13% 0.005 96);

  /* Slate (blue-tinted gray) */
  --color-slate-50: oklch(98% 0.005 265);
  --color-slate-100: oklch(96% 0.008 265);
  --color-slate-200: oklch(92% 0.010 265);
  --color-slate-300: oklch(87% 0.012 265);
  --color-slate-400: oklch(70% 0.015 265);
  --color-slate-500: oklch(55% 0.015 265);
  --color-slate-600: oklch(45% 0.015 265);
  --color-slate-700: oklch(37% 0.015 265);
  --color-slate-800: oklch(27% 0.012 265);
  --color-slate-900: oklch(20% 0.010 265);
  --color-slate-950: oklch(13% 0.008 265);

  /* ========================================================================
     Semantic Colors - Light Mode
     ======================================================================== */
  
  /* Canvas - page background */
  --color-canvas: #f7f4ff;
  --color-canvas-alt: linear-gradient(135deg, #fef3f4 0%, #fdf4ff 50%, #f0fdfa 100%);
  
  /* Surface - card/component backgrounds */
  --color-surface: rgba(255, 255, 255, 0.9);
  --color-surface-solid: #ffffff;
  --color-surface-elevated: rgba(255, 255, 255, 0.95);
  
  /* Ink - text colors */
  --color-ink: var(--color-gray-900);
  --color-ink-muted: var(--color-gray-500);
  --color-ink-faint: var(--color-gray-400);
  --color-ink-reversed: var(--color-white);
  
  /* Border colors */
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-border-muted: var(--color-gray-100);
  
  /* Interactive states */
  --color-focus-ring: rgba(99, 102, 241, 0.4);
  --color-hover-overlay: rgba(0, 0, 0, 0.04);
  --color-active-overlay: rgba(0, 0, 0, 0.08);
  
  /* Semantic - status colors */
  --color-primary: var(--color-pink-500);
  --color-primary-hover: var(--color-pink-600);
  --color-secondary: var(--color-sky-500);
  --color-secondary-hover: var(--color-sky-600);
  --color-negative: var(--color-red-500);
  --color-negative-hover: var(--color-red-600);
  --color-positive: var(--color-green-500);
  --color-positive-hover: var(--color-green-600);
  --color-warning: var(--color-amber-500);
  --color-warning-hover: var(--color-amber-600);

  /* Header specific */
  --color-header-bg: rgba(0, 0, 0, 0.1);
  --color-header-border: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Dark Mode - Media Query (Auto)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Canvas */
    --color-canvas: #0b1220;
    --color-canvas-alt: linear-gradient(135deg, #1a1f2e 0%, #0f172a 50%, #1e1b4b 100%);
    
    /* Surface */
    --color-surface: rgba(30, 41, 59, 0.9);
    --color-surface-solid: #1e293b;
    --color-surface-elevated: rgba(30, 41, 59, 0.95);
    
    /* Ink */
    --color-ink: var(--color-gray-100);
    --color-ink-muted: var(--color-gray-400);
    --color-ink-faint: var(--color-gray-500);
    --color-ink-reversed: var(--color-gray-900);
    
    /* Border */
    --color-border: var(--color-slate-700);
    --color-border-strong: var(--color-slate-600);
    --color-border-muted: var(--color-slate-800);
    
    /* Interactive */
    --color-focus-ring: rgba(129, 140, 248, 0.5);
    --color-hover-overlay: rgba(255, 255, 255, 0.04);
    --color-active-overlay: rgba(255, 255, 255, 0.08);

    /* Header */
    --color-header-bg: rgba(0, 0, 0, 0.25);
    --color-header-border: rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   Dark Mode - Class Override (Manual Toggle)
   ========================================================================== */
.dark,
html.dark {
  /* Canvas */
  --color-canvas: #0b1220;
  --color-canvas-alt: linear-gradient(135deg, #1a1f2e 0%, #0f172a 50%, #1e1b4b 100%);
  
  /* Surface */
  --color-surface: rgba(30, 41, 59, 0.9);
  --color-surface-solid: #1e293b;
  --color-surface-elevated: rgba(30, 41, 59, 0.95);
  
  /* Ink */
  --color-ink: var(--color-gray-100);
  --color-ink-muted: var(--color-gray-400);
  --color-ink-faint: var(--color-gray-500);
  --color-ink-reversed: var(--color-gray-900);
  
  /* Border */
  --color-border: var(--color-slate-700);
  --color-border-strong: var(--color-slate-600);
  --color-border-muted: var(--color-slate-800);
  
  /* Interactive */
  --color-focus-ring: rgba(129, 140, 248, 0.5);
  --color-hover-overlay: rgba(255, 255, 255, 0.04);
  --color-active-overlay: rgba(255, 255, 255, 0.08);

  /* Header */
  --color-header-bg: rgba(0, 0, 0, 0.25);
  --color-header-border: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Gradient Definitions
   ========================================================================== */
:root {
  /* Primary gradients */
  --gradient-primary: linear-gradient(to right, #ec4899, #a855f7, #6366f1);
  --gradient-secondary: linear-gradient(to right, #0ea5e9, #06b6d4);
  --gradient-amber: linear-gradient(to right, #f59e0b, #f97316);
  
  /* Avatar gradients */
  --gradient-avatar-pink: linear-gradient(to bottom right, #f472b6, #a78bfa, #818cf8);
  --gradient-avatar-sky: linear-gradient(to bottom right, #38bdf8, #818cf8, #a78bfa);
  
  /* Text gradients */
  --gradient-text-primary: linear-gradient(to right, #db2777, #9333ea, #4f46e5);
  
  /* Retro button gradient - light */
  --gradient-retro-button: linear-gradient(90deg, #fef3c7, #fbcfe8, #bfdbfe);
  
  /* FastRetro rainbow gradient using OKLCH pastels */
  --gradient-retro-rainbow: linear-gradient(90deg, 
    oklch(95% 0.08 95), 
    oklch(92% 0.1 350), 
    oklch(90% 0.08 230));
}

.dark,
html.dark {
  /* Retro button gradient - dark */
  --gradient-retro-button: linear-gradient(90deg, #f472b6, #818cf8, #60a5fa);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gradient-retro-button: linear-gradient(90deg, #f472b6, #818cf8, #60a5fa);
  }
}