/* CSS Variables */
:root {
  /* Colors */
  --color-primary: #57a4ff;
  --color-primary-hover: #4285f4;
  --color-text-primary: #303030;
  --color-text-secondary: #444c57;
  --color-text-muted: #565656;
  --color-background: #fbfbfb;
  --color-surface: #ffffff;
  --color-border: #e4e4e4;
  --color-success: #4caf50;
  --color-highlight: #4285f4;

  /* Typography */
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-2xl: 40px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.3px;
  --letter-spacing-normal: -0.25px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 46px;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}