/* ============================================
   1-VARIABLES.CSS
   
   Design Token Architecture
   1. PRIMITIVE VALUES (The DNA) - Raw hues, base units
   2. SPACING PRIMITIVES - Numeric scale
   3. SEMANTIC ALIASING - T-shirt sizes mapped to primitives
   4. THEME CONFIGURATION - Override semantics per theme
   ============================================ */

:root {
  /* ---------------------------------------------------------
     1. PRIMITIVE VALUES (The DNA)
     Raw values that rarely change
     --------------------------------------------------------- */
  
  /* Hues */
  --hue-warm: 15;    /* Earth/Primary */
  --hue-navy: 200;   /* Deep/Secondary */
  --hue-cyber: 185;  /* Cyan - for links */
  --hue-teal: 170;   /* Teal - for hover gradients */
  
  /* Saturation & Lightness Primitives */
  --saturation-vivid: 100%;
  --saturation-bright: 90%;
  --saturation-normal: 70%;
  --saturation-muted: 50%;
  --saturation-subtle: 20%;
  --lightness-white: 95%;
  --lightness-bright: 65%;
  --lightness-normal: 55%;
  --lightness-medium: 45%;
  --lightness-dark: 32%;
  --lightness-black: 0%;
  
  /* Neutral Scale */
  --neutral-0: 0%;
  --neutral-10: 10%;
  --neutral-15: 15%;
  --neutral-20: 20%;
  --neutral-30: 30%;
  --neutral-33: 33%;
  --neutral-55: 55%;
  --neutral-60: 60%;
  --neutral-75: 75%;
  --neutral-90: 90%;
  --neutral-95: 95%;
  --neutral-98: 98%;
  --neutral-100: 100%;
  
  /* Alpha/Opacity Primitives */
  --alpha-0: 0;
  --alpha-5: 0.05;
  --alpha-10: 0.1;
  --alpha-15: 0.15;
  --alpha-20: 0.2;
  --alpha-25: 0.25;
  --alpha-30: 0.3;
  --alpha-50: 0.5;
  --alpha-60: 0.6;
  --alpha-80: 0.8;
  --alpha-90: 0.9;
  --alpha-100: 1;
  
  /* Shadow Primitives */
  --shadow-color: 0 0 0;
  --shadow-color-light: 255 255 255;
  
  /* Code Block Colors */
  --code-bg-dark: #1a1a1a;
  --code-text-light: #e0e0e0;
  
  /* ---------------------------------------------------------
     2. SPACING PRIMITIVES
     Numeric scale based on 0.25rem (4px) base unit
     --------------------------------------------------------- */
  --base-unit: 0.25rem;
  
  /* The numeric scale - use these for component-specific spacing */
  --space-1: calc(1 * var(--base-unit));   /* 4px */
  --space-2: calc(2 * var(--base-unit));   /* 8px */
  --space-3: calc(3 * var(--base-unit));   /* 12px */
  --space-4: calc(4 * var(--base-unit));   /* 16px */
  --space-5: calc(5 * var(--base-unit));   /* 20px */
  --space-6: calc(6 * var(--base-unit));   /* 24px */
  --space-8: calc(8 * var(--base-unit));   /* 32px */
  --space-10: calc(10 * var(--base-unit)); /* 40px */
  --space-12: calc(12 * var(--base-unit)); /* 48px */
  --space-16: calc(16 * var(--base-unit)); /* 64px */
  --space-32: calc(32 * var(--base-unit)); /* 128px */
  
  /* ---------------------------------------------------------
     3. SEMANTIC ALIASING
     Map T-shirt sizes to the numeric scale
     --------------------------------------------------------- */
  
  /* Spacing */
  --space-xs: var(--space-1);   /* 4px */
  --space-sm: var(--space-2);   /* 8px */
  --space-md: var(--space-4);   /* 16px */
  --space-lg: var(--space-8);   /* 32px */
  --space-xl: var(--space-16);  /* 64px */
  --space-xxl: var(--space-32); /* 128px */
  
  /* ---------------------------------------------------------
     4. COLOR SEMANTICS (Light Mode Defaults)
     Use primitives to build semantic colors
     --------------------------------------------------------- */
  
  /* Backgrounds */
  --color-bg: hsl(300, 100%, var(--lightness-white));
  --color-bg-secondary: hsl(0, 0%, var(--lightness-white));
  --color-bg-tertiary: hsl(0, 0%, var(--lightness-white));
  
  /* Text */
  --color-text: hsl(0, 0%, var(--lightness-bright));
  --color-text-secondary: hsl(0, 0%, var(--lightness-bright));
  --color-text-muted: hsl(0, 0%, var(--lightness-bright));
  --color-text-inverse: hsl(0, 0%, var(--lightness-black));
  
  /* Borders */
  --color-border: hsl(0, 0%, var(--neutral-90));
  --color-border-light: hsl(0, 0%, var(--neutral-95));
  --color-border-subtle: hsl(0, 0%, var(--neutral-98));
  
  /* Accents - derived from primitives */
  --color-primary: hsl(var(--hue-warm), var(--saturation-normal), var(--lightness-dark));
  --color-secondary: hsl(var(--hue-navy), var(--saturation-vivid), 26%);
  --color-link: var(--color-primary);
  
  /* Link Hover Gradient - Light Mode: Bright teal to cyan */
  --color-link-gradient-start: hsl(var(--hue-teal), var(--saturation-bright), 45%);
  --color-link-gradient-end: hsl(var(--hue-teal), var(--saturation-vivid), 65%);
  
  /* Cyberpunk Link Colors */
  --color-link-cyan: hsl(var(--hue-cyber), var(--saturation-vivid), 55%);
  --color-link-coral: hsl(var(--hue-warm), var(--saturation-vivid), 65%);
  --color-link-glow: hsla(var(--hue-cyber), var(--saturation-vivid), 55%, 0.6);
  --color-teal: hsl(var(--hue-teal), var(--saturation-bright), 45%);
  
  /* Accent glow */
  --accent-glow: hsla(var(--hue-warm), var(--saturation-normal), var(--lightness-dark), 0.2);

  /* Functional */
  --color-success: hsl(145, 63%, 42%);
  --color-success-bg: hsla(145, 63%, 42%, 0.1);
  --color-warning: hsl(38, 92%, 50%);
  --color-warning-bg: hsla(38, 92%, 50%, 0.1);
  --color-error: hsl(0, 84%, 60%);
  --color-error-bg: hsla(0, 84%, 60%, 0.1);
  --color-info: hsl(210, 100%, 56%);
  --color-info-bg: hsla(210, 100%, 56%, 0.1);

  /* RGB color channels for rgba() functions */
  --color-primary-rgb: 81, 57, 57; /* Equivalent to hsl(15, 70%, 32%) */
  --color-secondary-rgb: 0, 66, 133; /* Equivalent to hsl(200, 100%, 26%) */

  /* Semantic color aliases for component use */
  --accent-color-faded: hsla(var(--hue-warm), var(--saturation-normal), var(--lightness-dark), 0.1);
  --accent-color-hover: hsl(var(--hue-warm), var(--saturation-normal), 25%); /* 7% darker than --lightness-dark */

  /* ---------------------------------------------------------
     5. LAYOUT TOKENS
     --------------------------------------------------------- */
  --content-max-width: 65ch;
  --content-wide-max-width: 900px;
  --container-max-width: 1200px;
  --header-height: 4rem;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* Legacy aliases */
  --border-radius: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-sm: var(--radius-sm);
  --border-subtle: 1px solid var(--color-border-light);

  /* ---------------------------------------------------------
     6. SHADOW TOKENS (Semantic)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color), var(--alpha-10));
  --shadow-sm: 0 2px 4px rgba(var(--shadow-color), var(--alpha-10));
  --shadow-md: 0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-10)),
               0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-lg: 0 10px 15px -3px rgba(var(--shadow-color), var(--alpha-10)),
               0 4px 6px -2px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-xl: 0 20px 25px -5px rgba(var(--shadow-color), var(--alpha-10)),
               0 10px 10px -5px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-glow: 0 0 15px var(--color-link-glow);
  --shadow-inset-light: inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));
  
  /* Component-specific shadows */
  --shadow-card: 0 4px 12px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-card-hover: 0 8px 24px rgba(var(--shadow-color), var(--alpha-15));
  --shadow-dropdown: 0 10px 15px rgba(var(--shadow-color), var(--alpha-10));

  /* ---------------------------------------------------------
     7. TYPOGRAPHY
     --------------------------------------------------------- */
  --font-body: 'Plus Jakarta Sans', 'Inter', 'Roboto', sans-serif;
  --font-body-serif: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-heading: 'Kode Mono', 'Bebas Neue', 'Playfair Display', serif;
  --font-mono: 'Kode Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  
  /* Text Scale */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-base: clamp(1.125rem, 2vw, 1.25rem);
  --text-lg: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 3vw, 2rem);
  --text-xxl: clamp(2rem, 4vw, 3rem);
  --text-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --text-4xl: clamp(3rem, 6vw, 4rem);

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing (tracking) */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ---------------------------------------------------------
     7. Z-INDEX REGISTRY
     --------------------------------------------------------- */
  --z-negative: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 800;
  --z-lightbox: 1000;
  --z-max: 9999;

  /* ---------------------------------------------------------
     8. MOTION TOKENS
     --------------------------------------------------------- */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-base: var(--duration-normal); /* Alias */
  
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Legacy compatibility */
  --transition-fast: var(--duration-fast);
  --transition-medium: var(--duration-normal);
  --transition-slow: var(--duration-slow);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hover-lift: -4px;
  --hover-scale: 1.02;
}

/* ---------------------------------------------------------
   DARK MODE CONFIGURATION
   Override semantic tokens using primitives
   --------------------------------------------------------- */
[data-theme="dark"],
.dark-mode {
  /* Backgrounds - use navy hue with low saturation */
  --color-bg: hsl(var(--hue-navy), var(--saturation-subtle), 8%);
  --color-bg-secondary: hsl(var(--hue-navy), var(--saturation-subtle), 12%);
  --color-bg-tertiary: hsl(var(--hue-navy), var(--saturation-subtle), 16%);
  
  /* Text - inverted neutral scale */
  --color-text: hsl(0, 0%, var(--neutral-95));
  --color-text-secondary: hsl(0, 0%, var(--neutral-75));
  --color-text-muted: hsl(0, 0%, var(--neutral-60));
  
  /* Borders */
  --color-border: hsl(var(--hue-navy), var(--saturation-subtle), 25%);
  --color-border-light: hsl(var(--hue-navy), var(--saturation-subtle), 20%);
  --color-border-subtle: hsl(var(--hue-navy), var(--saturation-subtle), 22%);
  
  /* Accents - desaturate for readability */
  --color-primary: hsl(var(--hue-warm), var(--saturation-subtle), var(--lightness-normal));
  --color-secondary: hsl(var(--hue-navy), var(--saturation-muted), var(--lightness-bright));
  
  /* Links - use cyberpunk cyan */
  --color-link: var(--color-link-cyan);
  --color-link-hover: hsl(var(--hue-cyber), var(--saturation-vivid), 70%);
  --color-link-glow: hsla(var(--hue-cyber), var(--saturation-vivid), 55%, 0.8);
  
  /* Link Hover Gradient - Dark Mode: Teal to black */
  --color-link-gradient-start: hsl(var(--hue-teal), var(--saturation-normal), 40%);
  --color-link-gradient-end: hsl(0, 0%, var(--neutral-0));
  
  /* Legacy compatibility */
  --color-background: var(--color-bg);
  --color-surface: var(--color-bg-secondary);
  --color-surface-elevated: var(--color-bg-tertiary);
  --color-text-light: var(--color-text-secondary);
  --color-primary-dark: hsl(var(--hue-warm), var(--saturation-subtle), var(--lightness-bright));
  --color-primary-highlight: hsla(var(--hue-warm), var(--saturation-subtle), var(--lightness-normal), 0.15);

  /* RGB color channels (dark mode) */
  --color-primary-rgb: 130, 130, 90; /* Approximate for dark mode primary */
  --color-secondary-rgb: 100, 150, 200; /* Approximate for dark mode secondary */

  /* Semantic aliases (dark mode) */
  --accent-color-faded: hsla(var(--hue-warm), var(--saturation-subtle), var(--lightness-normal), 0.15);
  --accent-color-hover: hsl(var(--hue-warm), var(--saturation-subtle), 65%); /* 10% lighter */
}

/* Light mode legacy compatibility */
:root {
  --color-background: var(--color-bg);
  --color-surface: var(--color-bg-secondary);
  --color-surface-elevated: var(--color-bg-tertiary);
  --color-text-light: var(--color-text-secondary);
  --color-primary-dark: hsl(var(--hue-warm), var(--saturation-normal), 22%);
  --color-primary-highlight: hsla(var(--hue-warm), var(--saturation-normal), var(--lightness-dark), 0.15);
  
  /* Legacy spacing aliases */
  --space-unit: var(--base-unit);
}

/* ---------------------------------------------------------
   REDUCED MOTION PREFERENCES
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --transition-fast: 0s;
    --transition-medium: 0s;
    --transition-slow: 0s;
    --hover-lift: 0;
    --hover-scale: 1;
  }
}

/* ---------------------------------------------------------
   BREAKPOINTS
   Centralized breakpoint system for responsive design
   --------------------------------------------------------- */
:root {
  /* Mobile-first breakpoints */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1536px;
  
  /* Legacy aliases for compatibility */
  --breakpoint-mobile: var(--breakpoint-sm);
  --breakpoint-tablet: var(--breakpoint-md);
  --breakpoint-desktop: var(--breakpoint-lg);
}

/* Font Display Swap - Font definitions moved to 0-reset.css */