/**
 * FSP Monochrome Design System - Design Tokens
 * Abdulloh Odilov (@AbdullokhWeb) - Developer Portfolio
 */

:root {
  /* Core Color Palette - Light Mode */
  --cl-bg: #f8fafc;
  --cl-card-bg: #ffffff;
  --cl-card-border: #e2e8f0;
  --cl-surface: #f4f4f5;
  --cl-surface-hover: #e4e4e7;
  --cl-ink: #09090b;
  --cl-ink-secondary: #27272a;
  --cl-muted: #52525b;
  --cl-muted-light: #a1a1aa;
  --cl-border: #e4e4e7;
  --cl-border-hover: #71717a;
  --cl-border-focus: #09090b;

  /* Semantic Highlights */
  --cl-error: #dc2626;
  --cl-error-bg: rgba(220, 38, 38, 0.08);
  --cl-success: #16a34a;
  --cl-success-bg: rgba(22, 163, 74, 0.08);
  --cl-warning: #ca8a04;
  --cl-warning-bg: rgba(202, 138, 4, 0.08);
  --cl-accent-yellow: #facc15;

  /* Glassmorphism & Overlays */
  --cl-header-bg: rgba(248, 250, 252, 0.82);
  --cl-dock-bg: rgba(255, 255, 255, 0.88);
  --cl-modal-overlay: rgba(9, 9, 11, 0.45);
  --cl-glass-border: rgba(9, 9, 11, 0.08);
  --cl-kbd-bg: #f4f4f5;
  --cl-kbd-border: #d4d4d8;

  /* Typography */
  --cl-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Typography Scale */
  --cl-text-2xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --cl-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --cl-text-sm: clamp(0.8125rem, 0.775rem + 0.3vw, 0.875rem);
  --cl-text-base: clamp(0.9375rem, 0.875rem + 0.35vw, 1rem);
  --cl-text-md: clamp(1.0625rem, 1rem + 0.4vw, 1.125rem);
  --cl-text-lg: clamp(1.1875rem, 1.1rem + 0.55vw, 1.3125rem);
  --cl-text-xl: clamp(1.375rem, 1.25rem + 0.75vw, 1.625rem);
  --cl-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --cl-text-3xl: clamp(2.125rem, 1.8rem + 1.8vw, 2.875rem);
  --cl-text-hero: clamp(2.5rem, 2rem + 2.8vw, 4.25rem);

  /* Radii */
  --cl-radius-card: 28px;
  --cl-radius-card-sm: 20px;
  --cl-radius-input: 14px;
  --cl-radius-btn: 14px;
  --cl-radius-control: 12px;
  --cl-radius-tag: 8px;
  --cl-radius-pill: 999px;

  /* Shadows */
  --cl-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
  --cl-shadow-card: 0 4px 20px -2px rgba(9, 9, 11, 0.05), 0 2px 6px -1px rgba(9, 9, 11, 0.03);
  --cl-shadow-card-hover: 0 12px 32px -4px rgba(9, 9, 11, 0.1), 0 4px 12px -2px rgba(9, 9, 11, 0.05);
  --cl-shadow-popover: 0 12px 36px -4px rgba(9, 9, 11, 0.12), 0 4px 16px -2px rgba(9, 9, 11, 0.06);
  --cl-shadow-modal: 0 24px 64px -12px rgba(9, 9, 11, 0.2), 0 12px 28px -6px rgba(9, 9, 11, 0.1);

  /* Transitions & Animation Curves */
  --cl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cl-duration-fast: 150ms;
  --cl-duration-normal: 250ms;
  --cl-duration-slow: 400ms;
  --cl-transition-fast: all var(--cl-duration-fast) var(--cl-ease);
  --cl-transition-normal: all var(--cl-duration-normal) var(--cl-ease);

  /* Layout Spacing */
  --cl-container-max: 1280px;
  --cl-container-wide: 1440px;
  --cl-header-height: 72px;
  --cl-dock-height: 68px;

  /* 8-Point Harmonic Spacing Grid */
  --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;
  --space-20: 80px;

  /* Standardized Z-Index Scale */
  --z-bg: -1;
  --z-base: 1;
  --z-card-hover: 10;
  --z-sticky-nav: 100;
  --z-dropdown: 200;
  --z-dock: 500;
  --z-cursor: 999;
  --z-modal: 9999;
  --z-toast: 10000;

  /* 5D Specular Glass & Ambient Spotlight */
  --cl-spotlight-color: rgba(9, 9, 11, 0.04);
  --cl-glass-glare: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%);

  /* Z-Index Hierarchy (Legacy Aliases) */
  --cl-z-base: 1;
  --cl-z-dropdown: 100;
  --cl-z-dock: 500;
  --cl-z-header: 800;
  --cl-z-modal: 1000;
  --cl-z-cmd: 1200;
  --cl-z-toast: 1500;
}

/* True Pitch-Black OLED Dark Mode */
[data-theme="dark"] {
  --cl-bg: #000000;
  --cl-card-bg: #0d0d10;
  --cl-card-border: #27272a;
  --cl-surface: #18181b;
  --cl-surface-hover: #27272a;
  --cl-ink: #ffffff;
  --cl-ink-secondary: #f4f4f5;
  --cl-muted: #a1a1aa;
  --cl-muted-light: #71717a;
  --cl-border: #27272a;
  --cl-border-hover: #52525b;
  --cl-border-focus: #ffffff;

  /* Semantic Highlights - Dark */
  --cl-error: #ef4444;
  --cl-error-bg: rgba(239, 68, 68, 0.16);
  --cl-success: #22c55e;
  --cl-success-bg: rgba(34, 197, 94, 0.16);
  --cl-warning: #eab308;
  --cl-warning-bg: rgba(234, 179, 8, 0.16);

  /* Glassmorphism & Overlays - Dark */
  --cl-header-bg: rgba(0, 0, 0, 0.82);
  --cl-dock-bg: rgba(13, 13, 16, 0.88);
  --cl-modal-overlay: rgba(0, 0, 0, 0.78);
  --cl-glass-border: rgba(255, 255, 255, 0.1);
  --cl-kbd-bg: #18181b;
  --cl-kbd-border: #3f3f46;

  /* 5D Specular Glass & Ambient Spotlight - Dark */
  --cl-spotlight-color: rgba(255, 255, 255, 0.08);
  --cl-glass-glare: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%);

  /* Shadows - Dark (focused glow & obsidian depth) */
  --cl-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.8);
  --cl-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px #27272a;
  --cl-shadow-card-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.85), 0 0 0 1px #3f3f46;
  --cl-shadow-popover: 0 12px 36px -4px rgba(0, 0, 0, 0.9), 0 0 0 1px #27272a;
  --cl-shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.95), 0 0 0 1px #3f3f46;
}