/* CSS Variables */
:root {
  /* Colors */
  --black-primary: #000000;
  --black-secondary: #0a0a0a;
  --white-primary: #FFFFFF;
  --white-secondary: #F5F5F5;
  --cream: #F5F2E8;
  --cream-subtle: #F5F2E8;
  --cream-text: #E8E5D8;
  --red-primary: #FF0000;
  --red-hover: #CC0000;
  --gray-text: #888888;
  --gray-border: #1a1a1a;
  --blue-user: #0066FF;

  /* Typography */
  --text-hero: 72px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-body-large: 20px;
  --text-body: 16px;
  --text-small: 14px;
  --text-tiny: 12px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 72px;
  --space-xxl: 120px;

  /* Breakpoints (for reference in media queries) */
  --mobile: 375px;
  --tablet: 768px;
  --desktop: 1024px;
  --desktop-large: 1440px;
}

/* Responsive Typography Adjustments */
@media (max-width: 1023px) {
  :root {
    --text-hero: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --text-hero: 36px;
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 20px;
    --text-body-large: 18px;
  }
}