/* CSS Custom Properties (Variables) */
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f4f4f4;
  --color-gray-medium: #f0f0f0;
  --color-gray-dark: #252525;
  --color-gray-darker: #333333;
  --color-gray-darkest: #444444;
  
  /* Background Colors */
  --bg-black: var(--color-black);
  --bg-white: var(--color-white);
  --bg-gray-light: var(--color-gray-light);
  --bg-gray-medium: var(--color-gray-medium);
  
  /* Text Colors */
  --text-black: var(--color-black);
  --text-white: var(--color-white);
  --text-gray: #333333;

  /* Accent */
  --accent-black: var(--color-black);
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-full: 999px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.05);
  
  /* Z-index */
  --z-header: 100;
  --z-menu-backdrop: 999;
  --z-menu-wrapper: 1000;
  --z-popup: 999;

  /* Font families */
  --font-body: "DM Sans", sans-serif;
  --font-heading: "DM Sans", sans-serif;

  /* Typography scale */
  --fs-display: clamp(2.4rem, 6.2vw, 5rem);
  --fs-h1: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 2.8vw, 2.3rem);
  --fs-h3: clamp(1.15rem, 1.9vw, 1.55rem);
  --fs-h4: clamp(1rem, 1.35vw, 1.2rem);
  --fs-body-lg: clamp(1.03rem, 1.2vw, 1.18rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.95rem;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-subheading: 1.2;
  --lh-body: 1.68;

  --tracking-display: -0.01em;
  --tracking-heading: -0.008em;
  --tracking-label: 0.08em;

  --space-heading-after: 0.75rem;
  --space-section-title-after: 1rem;
  --space-body-after: 1.1rem;
}