@font-face {
  font-family: 'Terentiev SP';
  src: url('../fonts/Terentiev SP Demo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #f4f3f9;
  --color-bg-blue: #8eafe9;
  --color-white: #ffffff;
  --color-teal: #215d69;
  --color-text: #2c2c2c;
  --color-text-muted: #6b7280;
  --color-border: rgba(255, 255, 255, 0.6);

  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Layout */
  --width-max: 540px;
  --cloud-height: 60px;
  --cloud-overlap: -30px;
  --features-overlap: -60px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Effects */
  --transition-press: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
  --shadow-container: 0 0 20px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
}