/**
 * CSS Variables - Design System
 * Core color palette, spacing, typography, and effects
 */

:root {
  /* Colors */
  --rt-bg: #ffffff;
  --rt-text: #0b1220;
  --rt-text-muted: #6b7280;
  --rt-surface: #f5f7fb;
  --rt-surface-alt: #eef2ff;
  --rt-primary: #2563eb;
  --rt-primary-contrast: #ffffff;
  --rt-accent: #10b981;
  --rt-border: #e5e7eb;
  
  /* Shadows */
  --rt-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --rt-shadow-lg: 0 18px 40px rgba(2, 6, 23, 0.12);
  --rt-shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.06);
  
  /* Spacing */
  --rt-spacing-xs: 0.25rem;
  --rt-spacing-sm: 0.5rem;
  --rt-spacing-md: 1rem;
  --rt-spacing-lg: 1.5rem;
  --rt-spacing-xl: 2rem;
  --rt-spacing-2xl: 3rem;
  --rt-spacing-3xl: 4rem;
  
  /* Border Radius */
  --rt-radius: 14px;
  --rt-radius-sm: 10px;
  --rt-radius-lg: 18px;
  --rt-radius-full: 999px;
  
  /* Typography */
  --rt-font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  --rt-font-heading: 'Poppins', 'Inter', sans-serif;
  --rt-font-size-xs: 0.75rem;
  --rt-font-size-sm: 0.875rem;
  --rt-font-size-base: 1rem;
  --rt-font-size-lg: 1.125rem;
  --rt-font-size-xl: 1.25rem;
  --rt-font-size-2xl: 1.5rem;
  --rt-font-size-3xl: 1.875rem;
  --rt-font-size-4xl: 2.25rem;
  --rt-font-size-5xl: 3rem;
  
  --rt-font-weight-light: 300;
  --rt-font-weight-normal: 400;
  --rt-font-weight-medium: 500;
  --rt-font-weight-semibold: 600;
  --rt-font-weight-bold: 700;
  
  /* Transitions */
  --rt-transition-fast: 0.15s ease;
  --rt-transition-normal: 0.2s ease;
  --rt-transition-smooth: 0.3s ease-in-out;
  
  /* Z-index */
  --rt-z-dropdown: 99;
  --rt-z-fixed: 997;
  --rt-z-modal: 999;
  --rt-z-preloader: 9999;
}

/* Dark Theme */
[data-theme="dark"] {
  --rt-bg: #0b1220;
  --rt-text: #e6eaf2;
  --rt-text-muted: #9aa4b2;
  --rt-surface: #111827;
  --rt-surface-alt: #0f172a;
  --rt-primary: #60a5fa;
  --rt-primary-contrast: #0b1220;
  --rt-accent: #34d399;
  --rt-border: #1f2937;
  --rt-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --rt-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);
  --rt-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
}