/* Design System Variables */

:root {
  /* Colors */
  --color-black: #1d1d1b;
  --color-inox: #71797e;
  --color-aluminum: #e3e8ec;
  --color-copper: #b87333;
  --color-white: #ffffff;

  /* Fonts */
  --font-primary: 'Space Grotesk', sans-serif;
  --font-secondary: 'Figtree', sans-serif;

  /* Typography - Desktop */
  --font-h1: 70px;
  --line-h1: 70px;

  --font-32: 32px;
  --line-32: 44.8px;

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

  --font-16: 16px;
  --line-16: 25.6px;

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

  --font-12: 12px;
  --line-12: auto;

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

  /* Spacing System */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 150px;
  --space-xxxxl: 200px;
  --space-special-sm: 120px;

  /* Layout */
  --max-width: 1200px;
  --section-padding: var(--space-xxxl);
  --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;
}

/* Mobile Typography Override */
@media (max-width: 768px) {
  :root {
    --font-h1: 40px;
    --line-h1: 40px;

    --font-32: 24px;
    --line-32: 33.6px;

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

    --section-padding: 80px;
    --container-padding: var(--space-md);
  }
}