/* ========================================================================
   MarketTalent — Design Tokens (OKLCH Color System + sRGB Fallbacks)
   
   This file loads AFTER tailwind.css and overrides the --mt-c-* variables
   with OKLCH-enhanced values for browsers that support it.
   Each variable declares the hex/rgba fallback FIRST, then the OKLCH override.
   ======================================================================== */

/* --- OKLCH Color Palette --- */
:root {
  --mt-oklch-primary-50: oklch(0.95 0.03 264);
  --mt-oklch-primary-100: oklch(0.91 0.05 264);
  --mt-oklch-primary-200: oklch(0.84 0.08 264);
  --mt-oklch-primary-300: oklch(0.76 0.12 264);
  --mt-oklch-primary-400: oklch(0.68 0.16 264);
  --mt-oklch-primary-500: oklch(0.58 0.18 264);
  --mt-oklch-primary-600: oklch(0.50 0.20 264);
  --mt-oklch-primary-700: oklch(0.44 0.18 264);
  --mt-oklch-primary-800: oklch(0.38 0.14 264);
  --mt-oklch-primary-900: oklch(0.32 0.12 264);

  --mt-oklch-success-400: oklch(0.74 0.15 160);
  --mt-oklch-success-500: oklch(0.66 0.17 160);
  --mt-oklch-success-600: oklch(0.56 0.16 160);

  --mt-oklch-danger-400: oklch(0.72 0.14 15);
  --mt-oklch-danger-500: oklch(0.63 0.20 15);
  --mt-oklch-danger-600: oklch(0.54 0.22 15);

  --mt-oklch-warning-400: oklch(0.78 0.16 85);
  --mt-oklch-warning-500: oklch(0.70 0.18 85);
  --mt-oklch-warning-600: oklch(0.60 0.17 85);

  --mt-oklch-info-400: oklch(0.72 0.14 255);
  --mt-oklch-info-500: oklch(0.62 0.18 255);
  --mt-oklch-info-600: oklch(0.54 0.20 255);

  --mt-oklch-slate-50: oklch(0.98 0.005 247);
  --mt-oklch-slate-100: oklch(0.96 0.006 247);
  --mt-oklch-slate-200: oklch(0.93 0.010 247);
  --mt-oklch-slate-300: oklch(0.88 0.014 247);
  --mt-oklch-slate-400: oklch(0.76 0.020 247);
  --mt-oklch-slate-500: oklch(0.62 0.025 247);
  --mt-oklch-slate-600: oklch(0.52 0.025 247);
  --mt-oklch-slate-700: oklch(0.43 0.025 247);
  --mt-oklch-slate-800: oklch(0.35 0.025 247);
  --mt-oklch-slate-900: oklch(0.27 0.03 247);

  /* --- Full --mt-c-* variable set (dark mode) for standalone pages --- */
  --mt-c-bg: #0a0a0f;
  --mt-c-bg: oklch(0.13 0.01 270);
  --mt-c-surface: rgba(255, 255, 255, 0.03);
  --mt-c-surface-hover: rgba(255, 255, 255, 0.06);
  --mt-c-surface-active: rgba(255, 255, 255, 0.1);
  --mt-c-border: rgba(255, 255, 255, 0.06);
  --mt-c-border-strong: rgba(255, 255, 255, 0.1);
  --mt-c-text: #e2e8f0;
  --mt-c-text: oklch(0.90 0.015 247);
  --mt-c-text-secondary: #94a3b8;
  --mt-c-text-secondary: oklch(0.76 0.020 247);
  --mt-c-text-muted: #7c8ba1;
  --mt-c-text-muted: oklch(0.60 0.02 247);
  --mt-c-primary: #6366f1;
  --mt-c-primary: oklch(0.58 0.18 264);
  --mt-c-primary-hover: #4f46e5;
  --mt-c-primary-hover: oklch(0.50 0.20 264);
  --mt-c-primary-glow: rgba(99, 102, 241, 0.4);
  --mt-c-success: #10b981;
  --mt-c-success: oklch(0.66 0.17 160);
  --mt-c-danger: #ef4444;
  --mt-c-danger: oklch(0.63 0.20 15);
  --mt-c-warning: #f59e0b;
  --mt-c-warning: oklch(0.70 0.18 85);
  --mt-c-info: #3b82f6;
  --mt-c-info: oklch(0.62 0.18 255);
  --mt-c-card-bg: rgba(255, 255, 255, 0.03);
  --mt-c-sidebar-bg: rgba(10, 10, 15, 0.85);
  --mt-c-sidebar-text: rgba(255, 255, 255, 0.5);
  --mt-c-modal-bg: rgba(17, 24, 39, 0.95);
  --mt-c-modal-bg: oklch(0.16 0.015 247 / 0.95);
  --mt-c-overlay: rgba(0, 0, 0, 0.6);
  --mt-c-input-bg: rgba(255, 255, 255, 0.05);
  --mt-c-scrollbar: rgba(255, 255, 255, 0.1);
  --mt-c-scrollbar-hover: rgba(255, 255, 255, 0.2);
}

/* --- Full --mt-c-* variable set (light mode) for standalone pages --- */
html:not(.dark) {
  --mt-c-bg: #f8fafc;
  --mt-c-bg: oklch(0.97 0.005 247);
  --mt-c-surface: #ffffff;
  --mt-c-surface: oklch(1.0 0 0);
  --mt-c-surface-hover: rgba(0, 0, 0, 0.04);
  --mt-c-surface-active: rgba(0, 0, 0, 0.07);
  --mt-c-border: rgba(0, 0, 0, 0.08);
  --mt-c-border-strong: rgba(0, 0, 0, 0.15);
  --mt-c-text: #1e293b;
  --mt-c-text: oklch(0.22 0.02 247);
  --mt-c-text-secondary: #475569;
  --mt-c-text-secondary: oklch(0.45 0.025 247);
  --mt-c-text-muted: #64748b;
  --mt-c-text-muted: oklch(0.55 0.02 247);
  --mt-c-primary: #4f46e5;
  --mt-c-primary: oklch(0.50 0.20 264);
  --mt-c-primary-hover: #4338ca;
  --mt-c-primary-hover: oklch(0.44 0.18 264);
  --mt-c-primary-glow: rgba(79, 70, 229, 0.3);
  --mt-c-success: #047857;
  --mt-c-success: oklch(0.49 0.13 160);
  --mt-c-danger: #dc2626;
  --mt-c-danger: oklch(0.54 0.22 15);
  --mt-c-warning: #b45309;
  --mt-c-warning: oklch(0.49 0.12 65);
  --mt-c-info: #2563eb;
  --mt-c-info: oklch(0.54 0.20 255);
  --mt-c-card-bg: #ffffff;
  --mt-c-sidebar-bg: rgba(255, 255, 255, 0.92);
  --mt-c-sidebar-text: rgba(0, 0, 0, 0.5);
  --mt-c-modal-bg: rgba(255, 255, 255, 0.98);
  --mt-c-modal-bg: oklch(0.99 0.002 247 / 0.98);
  --mt-c-overlay: rgba(0, 0, 0, 0.4);
  --mt-c-input-bg: rgba(0, 0, 0, 0.03);
  --mt-c-scrollbar: rgba(0, 0, 0, 0.15);
  --mt-c-scrollbar-hover: rgba(0, 0, 0, 0.25);
}

/* --- Glassmorphism Spring Animation Tokens --- */
:root {
  --mt-spring-ease: cubic-bezier(0.15, 0.75, 0.35, 1);
  --mt-spring-duration: 280ms;
  --mt-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mt-glass-blur: 24px;
  --mt-glass-saturate: 180%;
  --mt-gradient-border: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.1));
  --mt-glow-color: rgba(99, 102, 241, 0.3);
  --mt-glow-blur: 20px;
}

html:not(.dark) {
  --mt-glass-blur: 20px;
}

/* --- Legacy Aliases (deprecated tokens → canonical set) --- */
/* Old page CSS + templates referenced --mt-text/--mt-primary/etc. before the
   --mt-c-* naming landed. These aliases keep them working. Theme-aware because
   they point at the --mt-c-* variables. */
:root {
  --mt-text: var(--mt-c-text);
  --mt-text-muted: var(--mt-c-text-muted);
  --mt-primary: var(--mt-c-primary);
  --mt-primary-light: var(--mt-c-primary-glow);
  --mt-border: var(--mt-c-border);
  --mt-bg: var(--mt-c-bg);
  --mt-surface: var(--mt-c-surface);
  --mt-card-bg: var(--mt-c-card-bg);
  --mt-success: var(--mt-c-success);
  --mt-danger: var(--mt-c-danger);
  --mt-warning: var(--mt-c-warning);
  --mt-btn-radius: var(--mt-r-md);
  --mt-card-radius: var(--mt-r-xl);
  --mt-transition: var(--mt-tr-normal);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mt-spring-duration: 0ms;
  }
}