/* Design System Tokens */

:root {
  /* Colors - Dark Theme Only */
  --bg: #0B0C10;
  --surface: #111318;
  --text: #E6E8EC;
  --muted: #AAB1C2;
  --brand: #7AA2FF;
  
  /* Surface variations */
  --surface-elevated: #1A1D24;
  --surface-hover: #1F222A;
  
  /* Text variations */
  --text-secondary: #B8BFC8;
  --text-tertiary: #8B9299;
  
  /* Brand variations */
  --brand-light: #92B4FF;
  --brand-dark: #5A89FF;
  
  /* Semantic colors */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  
  /* Border colors - simplified to hairlines */
  --border: rgba(230, 232, 236, 0.1);
  --border-hover: rgba(230, 232, 236, 0.15);
  --border-focus: var(--brand);
}

/* Typography */
:root {
  /* Font families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', Times, serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font sizes - Fluid/Clamp based */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
  
  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/* Spacing */
:root {
  /* Base spacing unit */
  --space-unit: 1rem;
  
  /* Spacing scale */
  --space-xs: calc(var(--space-unit) * 0.25);    /* 4px */
  --space-sm: calc(var(--space-unit) * 0.5);     /* 8px */
  --space-md: calc(var(--space-unit) * 0.75);    /* 12px */
  --space-base: var(--space-unit);               /* 16px */
  --space-lg: calc(var(--space-unit) * 1.25);    /* 20px */
  --space-xl: calc(var(--space-unit) * 1.5);     /* 24px */
  --space-2xl: calc(var(--space-unit) * 2);      /* 32px */
  --space-3xl: calc(var(--space-unit) * 2.5);    /* 40px */
  --space-4xl: calc(var(--space-unit) * 3);      /* 48px */
  --space-5xl: calc(var(--space-unit) * 4);      /* 64px */
  --space-6xl: calc(var(--space-unit) * 5);      /* 80px */
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1200px;
  
  /* Content width for optimal reading */
  --content-width: 65ch;
  --content-width-wide: 75ch;
}

/* Border Radius */
:root {
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
}

/* Shadows - Simplified */
:root {
  --shadow-subtle: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  --shadow-hover: 0 2px 8px 0 rgb(0 0 0 / 0.1);
}

/* Motion */
:root {
  /* Durations */
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;
  
  /* Easing curves */
  --ease: cubic-bezier(0.22, 0.8, 0.31, 1);
  --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-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Animation scales */
  --scale-hover: 1.02;
  --scale-press: 0.98;
  --scale-enter: 1.05;
}

/* Z-Index Scale */
:root {
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
  --z-toast: 1700;
  --z-max: 2147483647;
}

/* Media Queries */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255, 255, 255, 0.3);
    --text: #FFFFFF;
    --bg: #000000;
  }
}