/* ============================================
   DESIGN SYSTEM TOKENS
   Unified CSS Custom Properties for Portfolio
   ============================================ */

/* 
 * Naming Convention: --{category}-{property}-{variant}
 * Categories: color, space, font, shadow, transition
 * This file is imported by all page-specific stylesheets.
 */

:root {
  /* ==========================================
     COLOR TOKENS - Light Mode (Default)
     ========================================== */
  
  /* Primary brand color */
  --color-primary: #1a3a52;
  --color-primary-light: #d9eef7;
  --color-primary-dark: #0d2a3d;
  
  /* Background layers */
  --color-bg: #f5f5f5;
  --color-bg-surface: #ffffff;
  
  /* Text colors */
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-inverse: #ffffff;
  
  /* Border and accent */
  --color-border: #dddddd;
  --color-accent: #e8f0f7;
  --color-accent-hover: #d0dce8;
  
  /* Social brand colors */
  --color-github: #333333;
  --color-linkedin: #0A66C2;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 35px rgba(15, 23, 42, 0.08);
  
  /* Typography */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  
  /* Spacing scale (8px grid) */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  
  /* Layout */
  --container-max-width: 1200px;
  --navbar-height: 56px;
  
  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
}

/* ==========================================
   LIGHT MODE - Default (Always Applied)
   Values defined in :root above are light mode
   ========================================== */

/* ==========================================
   DARK MODE - User Toggle Override
   Only applied when user explicitly clicks toggle
   ========================================== */
html.dark-mode {
  color-scheme: dark;
  
  --color-primary: #4a9fd8;
  --color-primary-light: #2a5a7a;
  --color-primary-dark: #7ab5d8;
  
  --color-bg: #0f1419;
  --color-bg-surface: #1a1f2e;
  
  --color-text: #e8e8e8;
  --color-text-muted: #a8a8a8;
  --color-text-inverse: #ffffff;
  
  --color-border: #2a2f3a;
  --color-accent: #2a3a4a;
  --color-accent-hover: #3a4a5a;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.35);
}

/* ==========================================
   BACKWARD COMPATIBILITY ALIASES
   Map old variable names to new unified names
   ========================================== */
:root {
  /* Legacy aliases for styles.css */
  --primary-color: var(--color-primary);
  --primary-light: var(--color-primary-light);
  --secondary-color: var(--color-primary-dark);
  --background-color: var(--color-bg);
  --surface-color: var(--color-bg-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --border-color: var(--color-border);
  --accent-color: var(--color-accent);
  --hover-color: var(--color-accent-hover);
  --github-color: var(--color-github);
  --linkedin-color: var(--color-linkedin);
  --transition-smooth: var(--transition-base);
  
  /* Legacy aliases for project.css */
  --bg: var(--color-bg);
  --surface: var(--color-bg-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --border: var(--color-border);
  
  /* Legacy aliases for resume.css */
  --background: var(--color-bg);
}

/* Dark mode aliases */
html.dark-mode {
  --primary-color: var(--color-primary);
  --primary-light: var(--color-primary-light);
  --secondary-color: var(--color-primary-dark);
  --background-color: var(--color-bg);
  --surface-color: var(--color-bg-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --border-color: var(--color-border);
  --accent-color: var(--color-accent);
  --hover-color: var(--color-accent-hover);
  
  --bg: var(--color-bg);
  --surface: var(--color-bg-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --border: var(--color-border);
  
  --background: var(--color-bg);
}

/* ==========================================
   ACCESSIBILITY TOKENS
   Focus styles and skip link behavior
   ========================================== */

/* Focus ring style for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users but keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link styling */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Main content focus target - remove visual impact but allow focus */
main[tabindex="-1"]:focus {
  outline: none;
}