/* Design System Variables */

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-blue: #252c63;
  --color-yellow: #fdb03b;

  /* Fonts */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'source-serif-pro', serif;

  /* Typography - Mobile */
  --font-h1: 45px;
  --line-h1: 54px;

  --font-h2: 35px;
  --line-h2: 42px;

  --font-h3: 30px;
  --line-h3: 36px;

  --font-25: 18px;
  --line-25: 25.2px;

  --font-20: 18px;
  --line-20: 25.2px;

  --font-16: 16px;
  --line-16: 22.4px;

  --font-14: 14px;
  --line-14: 19.6px;

  /* Spacing System */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 25px;
  --space-lg: 30px;
  --space-xl: 50px;
  --space-xxl: 75px;
  --space-xxxl: 90px;
  --space-special-sm: 120px;

  /* Layout */
  --max-width: 1200px;
  --section-padding: var(--space-xxl);
  --container-padding: var(--space-lg);

  /* Breakpoint */
  --breakpoint-mobile: 768px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* Desktop Typography Override */
@media (min-width: 992px) {
  :root {
    --font-h1: 60px;
    --line-h1: 72px;

    --font-h2: 45px;
    --line-h2: 54px;

    --font-h3: 30px;
    --line-h3: 42px;

    --font-25: 25px;
    --line-25: 35px;

    --font-20: 20px;
    --line-20: 28px;
  }
}

@media (min-width: 1600px) {
  :root {
    --font-h1: 75px;
    --line-h1: 90px;

    --font-h2: 55px;
    --line-h2: 66px;

    --font-h3: 40px;
    --line-h3: 48px;

    --font-25: 35px;
    --line-25: 42px;

    --font-20: 30px;
    --line-20: 36px;

    --font-16: 25px;
    --line-16: 30px;
  }
}