vars.css

:root {
  /* Base Font Size */
  --font-size-base: 20px;
  --font-size-base-min: 18px;

  /* Colors */
  --stroke: rgba(0, 0, 0, 0.2);
  --base: #f7f7f7;
  --white: #ffffff;
  --accent: #ff385c;
  --contrast: #000000;
  --neutral: #989898;

  --heading-color: var(--contrast);

  /* Layout */
  --content-width: 1200px;
  --content-width-narrow: 768px;
  --content-width-wide: 1400px;

  /* Typography - Utopia Scale (Minor Third 1.2, 320px-1240px) */
  --text-xs: clamp(0.6944rem, 0.6727rem + 0.1087vi, 0.8rem);
  --text-s: clamp(0.8333rem, 0.7963rem + 0.1848vi, 1rem);
  --text-m: clamp(1rem, 0.9348rem + 0.3261vi, 1.25rem);
  --text-l: clamp(1.2rem, 1.0891rem + 0.5543vi, 1.5625rem);
  --text-xl: clamp(1.44rem, 1.2596rem + 0.9022vi, 1.9531rem);
  --text-xxl: clamp(1.728rem, 1.4455rem + 1.4126vi, 2.4414rem);
  --text-xxxl: clamp(2.0736rem, 1.6431rem + 2.1522vi, 3.0518rem);
  --text-display: clamp(2.4883rem, 1.8455rem + 3.2141vi, 3.8147rem);

  /* Heading Map */
  --h1: var(--text-xxxl);
  --h2: var(--text-xxl);
  --h3: var(--text-l);
  --h4: var(--text-m);
  --h5: var(--text-m);
  --h6: var(--text-m);

  /* Line Heights - Inversely proportional to size */
  --line-height-xs: 1.7;
  --line-height-s: 1.65;
  --line-height-m: 1.6;
  --line-height-l: 1.5;
  --line-height-xl: 1.4;
  --line-height-xxl: 1.3;
  --line-height-xxxl: 1.2;
  --line-height-display: 1.1;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Typography Defaults */
  --text-base: var(--text-m);
  --body-line-height: var(--line-height-m);
  --heading-letter-spacing: var(--letter-spacing-tight);

  /* Spacing - Utopia Fluid Scale */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vi, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem);

  /* Spacing Mappings */
  --gap: var(--space-m);
  --gap-s: var(--space-s);
  --gap-m: var(--space-m);
  --gap-l: var(--space-l);
  --gap-xl: var(--space-xl);
  --gap-2xl: var(--space-2xl);
  --gap-3xl: var(--space-3xl);

  --gutter: var(--space-m);
  --gutter-s: var(--space-s);
  --gutter-m: var(--space-m);
  --gutter-l: var(--space-l);

  --section-space: var(--space-2xl);
  --section-space-s: var(--space-xl);
  --section-space-l: var(--space-3xl);

  /* Border Radius */
  --radius-xs: 0.125rem;
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-round: 50%;
  --radius-pill: 100vw;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-m: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-l: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Stroke Colors */
  --stroke-light: rgba(0, 0, 0, 0.08);
  --stroke: rgba(0, 0, 0, 0.15);
  --stroke-strong: rgba(0, 0, 0, 0.25);

  /* Stroke on dark backgrounds */
  --stroke-light-inverse: rgba(255, 255, 255, 0.1);
  --stroke-inverse: rgba(255, 255, 255, 0.2);
  --stroke-strong-inverse: rgba(255, 255, 255, 0.35);

  /* Stroke Widths */
  --stroke-width-s: 1px;
  --stroke-width-m: 2px;
  --stroke-width-l: 3px;

  /* Common Border Shorthand */
  --border-light: var(--stroke-width-s) solid var(--stroke-light);
  --border: var(--stroke-width-s) solid var(--stroke);
  --border-strong: var(--stroke-width-s) solid var(--stroke-strong);
}