/**
 * Design Tokens
 * Centralized colors, typography, and spacing values
 * Use CSS variables instead of hardcoded values
 */

:root {
  /* ========================================
     COLORS
     ======================================== */
  
  /* Base Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  
  /* Gray Scale */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  
  /* Brand Colors */
  --color-accent: #E1DAC8;
  --color-accent-dark: #D4C9B0;
  --color-accent-light: #F0EBE0;
  
  /* Background Colors */
  --color-bg-primary: #F1F1EC;
  --color-bg-secondary: #E1E2E2;
  --color-bg-white: #FFFFFF;
  --color-bg-gray: #F9FAFB;
  
  /* Text Colors */
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-tertiary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-light: #A2A2A2;
  
  /* Inline / body text links — warm brown hover (not default blue) */
  --color-link: var(--color-text-primary);
  --color-link-hover: #6B5344;
  --color-link-hover-rgb: 107, 83, 68;
  --color-link-hover-dark: #5a4336;
  
  /* Border Colors */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(0, 0, 0, 0.1);
  --color-border-dark: rgba(0, 0, 0, 0.2);
  --color-border-gray: #E5E7EB;
  
  /* Transparent Colors */
  --color-black-transparent-35: rgba(0, 0, 0, 0.35);
  --color-black-transparent-50: rgba(0, 0, 0, 0.5);
  --color-white-transparent-35: rgba(255, 255, 255, 0.35);
  --color-white-transparent-50: rgba(255, 255, 255, 0.5);
  
  /* Status Colors */
  --color-success: #059669;
  /* LearnDash / course: completed topic checkmark (circle) — matches sidebar */
  --color-topic-completed: #A7925B;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #3B82F6;
  
  /* Button Colors */
  --color-btn-primary-bg: #FFFFFF;
  --color-btn-primary-text: #000000;
  --color-btn-primary-hover-bg: #F9FAFB;
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: #000000;
  --color-btn-secondary-border: #000000;
  --color-btn-dark-bg: #000000;
  --color-btn-dark-text: #FFFFFF;
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  /* Font Families */
  --font-inter: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sf-pro: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-adventure: 'Adventure V1', sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  
  /* Line Heights */
  --line-height-xs: 11px;
  --line-height-sm: 16px;
  --line-height-base: 25px;
  --line-height-md: 40px;
  --line-height-lg: 45px;
  --line-height-xl: 50px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.4px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 2%;
  
  /* ========================================
     SPACING
     ======================================== */
  
  --spacing-xs: 2px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 60px;
  --spacing-7xl: 80px;
  
  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */
  
  --transition-speed: 0.3s;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* ========================================
     Z-INDEX
     ======================================== */
  
  --z-index-base: 1;
  --z-index-menu: 99;
  --z-index-header: 999;
  --z-index-overlay: 1000;
  --z-index-modal: 1001;
  
  /* ========================================
     BORDERS & RADIUS
     ======================================== */
  
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 40px;
  --border-radius-xl: 50px;
  --border-radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  
  /* ========================================
     SHADOWS
     ======================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-link-hover: 0 0 20px rgba(207, 207, 207, 0.6);
  --shadow-link-active: 0 0 15px rgba(207, 207, 207, 0.4);
  
  /* Bootstrap 5: links match body text; hover = brand brown (see _reboot.scss a:hover) */
  --bs-link-color: var(--color-text-primary);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-color-rgb: 17, 24, 39;
  /* Same RGB as --color-link-hover-rgb (explicit for Bootstrap reboot) */
  --bs-link-hover-color-rgb: 107, 83, 68;
}