/* Design System Tokens - Based on Uber Design Language */
/* Root variables for light mode */
:root {
  /* ============================================
     COLORS - Light Mode
     ============================================ */
  
  /* Primary & Brand */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-ink: #000000;
  --color-on-dark: #ffffff;
  
  /* Surface Colors */
  --color-canvas: #ffffff;
  --color-canvas-soft: #efefef;
  --color-canvas-softer: #f3f3f3;
  --color-surface-pressed: #e2e2e2;
  --color-black-elevated: #1a1a1a;
  
  /* Text Colors */
  --color-body: #5e5e5e;
  --color-mute: #afafaf;
  --color-hairline-mid: #4b4b4b;
  
  /* Semantic Colors */
  --color-link: #0000ee;
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Family */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                  'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               'Helvetica Neue', Arial, sans-serif;
  
  /* Display Scale */
  --font-size-display-xxl: 52px;
  --line-height-display-xxl: 64px;
  --font-weight-display-xxl: 700;
  
  --font-size-display-xl: 36px;
  --line-height-display-xl: 44px;
  --font-weight-display-xl: 700;
  
  --font-size-display-lg: 32px;
  --line-height-display-lg: 40px;
  --font-weight-display-lg: 700;
  
  --font-size-display-md: 24px;
  --line-height-display-md: 32px;
  --font-weight-display-md: 700;
  
  --font-size-display-sm: 20px;
  --line-height-display-sm: 28px;
  --font-weight-display-sm: 700;
  
  /* Body Scale */
  --font-size-body-lg: 18px;
  --line-height-body-lg: 24px;
  --font-weight-body-lg: 500;
  
  --font-size-body-md: 16px;
  --line-height-body-md: 24px;
  --font-weight-body-md: 400;
  
  --font-size-body-md-strong: 16px;
  --line-height-body-md-strong: 20px;
  --font-weight-body-md-strong: 500;
  
  --font-size-body-sm: 14px;
  --line-height-body-sm: 20px;
  --font-weight-body-sm: 400;
  
  --font-size-body-sm-strong: 14px;
  --line-height-body-sm-strong: 16px;
  --font-weight-body-sm-strong: 500;
  
  --font-size-caption: 12px;
  --line-height-caption: 20px;
  --font-weight-caption: 400;
  
  /* Button Typography */
  --font-size-button-large: 18px;
  --line-height-button-large: 24px;
  --font-weight-button-large: 500;
  
  --font-size-button-md: 16px;
  --line-height-button-md: 20px;
  --font-weight-button-md: 500;
  
  /* ============================================
     SPACING
     ============================================ */
  
  --spacing-xxs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --rounded-none: 0px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-pill: 999px;
  --rounded-pill-tab: 36px;
  --rounded-full: 9999px;
  
  /* ============================================
     SHADOWS / ELEVATION
     ============================================ */
  
  --shadow-none: none;
  --shadow-subtle: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
  --shadow-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  --shadow-float: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  --container-max-width: 1200px;
  --container-padding-desktop: var(--spacing-3xl);
  --container-padding-mobile: var(--spacing-lg);
  
  /* ============================================
     BREAKPOINTS (for reference in JS)
     ============================================ */
  
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1120px;
}

/* ============================================
   DARK MODE COLORS
   ============================================ */

[data-theme="dark"] {
  /* Primary & Brand (inverted) */
  --color-primary: #ffffff;
  --color-on-primary: #0f0f0f;
  --color-ink: #ffffff;
  --color-on-dark: #0f0f0f;
  
  /* Surface Colors */
  --color-canvas: #0f0f0f;
  --color-canvas-soft: #1a1a1a;
  --color-canvas-softer: #252525;
  --color-surface-pressed: #2a2a2a;
  --color-black-elevated: #2a2a2a;
  
  /* Text Colors */
  --color-body: #a0a0a0;
  --color-mute: #707070;
  --color-hairline-mid: #b0b0b0;
  
  /* Semantic Colors */
  --color-link: #6b8afd;
  
  /* Shadows (darker in dark mode) */
  --shadow-subtle: 0px 4px 16px 0px rgba(0, 0, 0, 0.4);
  --shadow-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.5);
  --shadow-float: 0px 2px 8px 0px rgba(0, 0, 0, 0.4);
}

/* ============================================
   UTILITY CLASSES - Typography
   ============================================ */

.display-xxl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xxl);
  line-height: var(--line-height-display-xxl);
  font-weight: var(--font-weight-display-xxl);
  letter-spacing: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  font-weight: var(--font-weight-display-xl);
  letter-spacing: 0;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  font-weight: var(--font-weight-display-lg);
  letter-spacing: 0;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-display-md);
  font-weight: var(--font-weight-display-md);
  letter-spacing: 0;
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  font-weight: var(--font-weight-display-sm);
  letter-spacing: 0;
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-body-lg);
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: var(--font-weight-body-md);
}

.body-md-strong {
  font-family: var(--font-body);
  font-size: var(--font-size-body-md-strong);
  line-height: var(--line-height-body-md-strong);
  font-weight: var(--font-weight-body-md-strong);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-body-sm);
}

.body-sm-strong {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm-strong);
  line-height: var(--line-height-body-sm-strong);
  font-weight: var(--font-weight-body-sm-strong);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-caption);
}