/* MASS Agency — CSS Custom Properties */

:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  --color-accent: #CDFF00;
  --color-mint: #B8E0D2;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-500: #999999;
  --color-dark-bg: #111111;

  /* Typography — Font families */
  --font-heading: 'Big Shoulders Display', sans-serif;
  --font-body: 'Geist', sans-serif;

  /* Typography — Fluid size scale */
  --text-xs: clamp(0.7rem, 1vw, 0.8rem);
  --text-sm: clamp(0.8rem, 1.2vw, 0.9rem);
  --text-base: clamp(0.9rem, 1.4vw, 1rem);
  --text-md: clamp(1rem, 1.8vw, 1.2rem);
  --text-lg: clamp(1.2rem, 2.5vw, 1.8rem);
  --text-xl: clamp(1.8rem, 4vw, 3rem);
  --text-2xl: clamp(2.5rem, 6vw, 5rem);
  --text-hero: clamp(3rem, 8vw, 7rem);

  /* Typography — Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;
  --space-3xl: 16rem;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;
  --dur-xl: 1.2s;

  /* Layout */
  --max-width: 1440px;
  --content-pad: clamp(1.5rem, 5vw, 6rem);
  --section-pad-y: var(--space-xl);
  --nav-height: 80px;

  /* Breakpoints (for reference in JS) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}