/* css/variables.css */
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #f0f0f0;
  --color-background: #ffffff;
  --color-surface: #f9f9f9;
  --color-text-primary: #111111;
  --color-text-secondary: #393939;
  --color-border: #eaeaea;

  /* Typography */
  /* Using Inter for body and Plus Jakarta Sans for a slightly more rounded, geometric heading style */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', var(--font-family-sans);
  --font-family-section-title: 'Montserrat', var(--font-family-heading);

  /* Fluid Typographic Scale */
  --font-size-xs: clamp(0.75rem, 0.7vw + 0.5rem, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8vw + 0.6rem, 1rem);
  --font-size-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.2vw + 1rem, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 2vw + 1rem, 2rem);
  --font-size-3xl: clamp(2rem, 3vw + 1rem, 3rem);
  --font-size-4xl: clamp(2.5rem, 4vw + 1rem, 4rem);
  --font-size-5xl: clamp(3rem, 5vw + 1rem, 5rem);
  --font-size-6xl: clamp(3.5rem, 6vw + 1rem, 6.5rem);

  /* Spacing Scale (8px system) */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-24: 6rem;
  /* 96px */
  --space-32: 8rem;
  /* 128px */

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  /* For larger cards/images */
  --radius-pill: 9999px;
  /* For buttons and tags */

  /* Shadows */
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Containers */
  --container-max-width: 1320px;
  --container-padding: var(--space-4);
  /* Reduced from --space-6 */

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
    /* Reduced from --space-8 */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
    /* Reduced from --space-12 */
  }
}