/* 
 * EduGPT Design System Tokens
 * Comprehensive design tokens for consistent UI across light/dark modes
 * Ensures WCAG 2.2 AA compliance and responsive design
 */

/* ============================================
   BASE TOKENS - Light Mode (Default)
   ============================================ */
:root {
  /* Brand Colors */
  --color-primary: #6d28d9;           /* Edu Purple */
  --color-primary-hover: #5b21b6;     /* Darker for hover states */
  --color-primary-light: #7c3aed;     /* Lighter variant */
  --color-secondary: #308463;         /* Civic Green */
  --color-secondary-hover: #2a7558;   /* Darker for hover */
  --color-accent: #db2777;            /* Pink - for focus states */
  --color-accent-light: #ec4899;      /* Lighter pink */
  
  /* Semantic Colors */
  --color-success: #308463;
  --color-warning: #B45309;
  --color-danger: #B91C1C;
  --color-info: #004A99;
  
  /* Surface Colors */
  --color-surface: #ffffff;
  --color-surface-elevated: #f9fafb;
  --color-surface-overlay: #ffffff;
  --color-background: #ffffff;
  
  /* Text Colors - WCAG AA Compliant */
  --color-text-primary: #0f172a;      /* Near black for maximum contrast */
  --color-text-secondary: #475569;    /* AA compliant on white - 7.7:1 ratio */
  --color-text-muted: #4b5563;        /* Updated for WCAG AA - 5.9:1 ratio on white */
  --color-text-inverse: #ffffff;      /* White text on dark backgrounds */
  
  /* Border Colors */
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-border-focus: var(--color-accent);
  
  /* Elevation System - Light Mode */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --elevation-2: 0 2px 6px rgba(16, 24, 40, 0.08);
  --elevation-3: 0 6px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
  --elevation-4: 0 12px 20px rgba(16, 24, 40, 0.12);
  --elevation-5: 0 24px 40px rgba(16, 24, 40, 0.14);
  
  /* Spacing Scale (8pt base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  
  /* Responsive Typography - Fluid Scales */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --text-hero: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  --text-hero-sub: clamp(1.875rem, 1.5rem + 2vw, 3.5rem);
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px - preserves dev appearance */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;  /* Pills */
  
  /* Animation Timing */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-moderate: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  
  /* Animation Easing */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  
  /* Focus Ring */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-accent);
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-background),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
  
  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  
  /* Container Widths */
  --container-xs: 20rem;     /* 320px */
  --container-sm: 40rem;     /* 640px */
  --container-md: 48rem;     /* 768px */
  --container-lg: 64rem;     /* 1024px */
  --container-xl: 80rem;     /* 1280px */
  --container-2xl: 96rem;    /* 1536px */
  
  /* Breakpoints for Media Queries */
  --breakpoint-xs: 20rem;    /* 320px */
  --breakpoint-sm: 40rem;    /* 640px */
  --breakpoint-md: 48rem;    /* 768px */
  --breakpoint-lg: 64rem;    /* 1024px */
  --breakpoint-xl: 80rem;    /* 1280px */
  --breakpoint-2xl: 96rem;   /* 1536px */
}

/* ============================================
   DARK MODE TOKENS
   ============================================ */
.dark {
  /* Surface Colors - Dark Mode */
  --color-surface: #0f172a;
  --color-surface-elevated: #1e293b;
  --color-surface-overlay: #334155;
  --color-background: #0f172a;
  
  /* Text Colors - Dark Mode - WCAG AA Compliant */
  --color-text-primary: #f1f5f9;      /* 13.8:1 ratio on dark bg */
  --color-text-secondary: #cbd5e1;    /* 11.4:1 ratio on dark bg */
  --color-text-muted: #94a3b8;        /* 7.7:1 ratio on dark bg - WCAG AA */
  --color-text-inverse: #ffffff;
  
  /* Border Colors - Dark Mode */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(255, 255, 255, 0.2);
  
  /* Adjusted Brand Colors for Dark Mode */
  --color-primary: #a678ff;           /* Lighter purple for better contrast */
  --color-primary-hover: #7c3aed;     /* Slightly darker purple for hover - matching light mode behavior */
  --color-primary-light: #c7a9ff;
  --color-secondary: #4ade80;         /* Lighter green */
  --color-secondary-hover: #22c55e;
  --color-accent: #f472b6;            /* Lighter pink */
  --color-accent-light: #f9a8d4;
  
  /* Elevation System - Dark Mode */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --elevation-3: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --elevation-4: 0 12px 20px rgba(0, 0, 0, 0.5);
  --elevation-5: 0 24px 40px rgba(0, 0, 0, 0.6);
  
  /* Focus Ring - Dark Mode */
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-background),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-accent);
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   COMPONENT-SPECIFIC TOKENS
   ============================================ */
:root {
  /* Button Tokens */
  --button-padding-x: var(--space-4);
  --button-padding-y: var(--space-3);
  --button-height-sm: 2.25rem;  /* 36px */
  --button-height-md: 2.75rem;  /* 44px - Touch friendly */
  --button-height-lg: 3.25rem;  /* 52px */
  --button-radius: var(--radius-md);
  
  /* Card Tokens */
  --card-padding: var(--space-5);
  --card-padding-mobile: var(--space-4);
  --card-radius: var(--radius-md);
  --card-shadow-rest: var(--elevation-1);
  --card-shadow-hover: var(--elevation-2);
  --card-border-width: 1px;
  --card-accent-height: 3px;
  
  /* Input Tokens */
  --input-height: 2.75rem;  /* 44px - Touch friendly */
  --input-padding-x: var(--space-3);
  --input-radius: var(--radius-md);
  --input-border-width: 1px;
  
  /* Badge Tokens */
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-1);
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--text-xs);
  
  /* Modal Tokens */
  --modal-backdrop-opacity: 0.5;
  --modal-radius: var(--radius-lg);
  --modal-padding: var(--space-6);
  --modal-max-width: 40rem;
  
  /* Navigation Tokens */
  --nav-height: 4rem;  /* 64px */
  --nav-height-mobile: 3.5rem;  /* 56px */
  --nav-shadow: var(--elevation-1);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) {
  :root {
    /* Adjust spacing for mobile */
    --card-padding: var(--space-4);
    --modal-padding: var(--space-4);
    --container-padding: var(--space-4);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    /* Tablet adjustments */
    --container-padding: var(--space-5);
  }
}

@media (min-width: 1024px) {
  :root {
    /* Desktop adjustments */
    --container-padding: var(--space-6);
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #4c1d95;
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-border: #000000;
  }
  
  .dark {
    --color-primary: #c7a9ff;
    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e5e5;
    --color-border: #ffffff;
  }
}

/* ============================================
   UTILITY: Apply Focus Ring
   ============================================ */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================================
   UTILITY: Elevation Classes
   ============================================ */
.elevation-0 { box-shadow: var(--elevation-0); }
.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }
.elevation-4 { box-shadow: var(--elevation-4); }
.elevation-5 { box-shadow: var(--elevation-5); }

/* ============================================
   UTILITY: Standard Hover Lift
   ============================================ */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover {
    transform: none;
  }
}