:root {
  /* ======================================
      Global
    ====================================== */

  /* Site width */
  --container-width: 1200px;

  /* Colors */
  --dark-color: #060809;
  --body-dark-color: #0e0e0e;
  --dark-muted: #101314;
  --border-color: #ddd6cf;
  --text-color-muted: #eeeeee;
  --black: #000;
  --white: #fff;
  --primary: #ae2685;
  --font-family-base: "Inter", sans-serif;
  --font-family-serif: "Times-New-Roman", serif;
  /* --font-family-headings: "Helvetica Neue", Helvetica, Arial, sans-serif; */

  /* ======================================
      Spacing
    ====================================== */

  /* --- Spacing Scale (1.5x Multiplier) --- */
  --space-xxs: 0.4375rem;
  --space-xs: 0.65rem;
  --space-s: 1rem;
  --space-m: calc(var(--space-s) * 1.5);
  --space-l: calc(var(--space-m) * 1.5);
  --space-xl: calc(var(--space-l) * 1.5);
  --space-xxl: calc(var(--space-xl) * 1.5);

  /* ======================================
      Fluid Typography
    ====================================== */

  /* --- Fluid Typography (Body & UI) --- */
  /* Values from Utopia — mathematically consistent scale */
  /* https://utopia.fyi/type/calculator?c=360,16,1.2,1200,20,1.25,5,2 */
  --text-xs: clamp(0.6944rem, 0.6492rem + 0.2011vw, 0.8rem); /* step -2 */
  --text-s: clamp(0.8333rem, 0.7619rem + 0.3175vw, 1rem); /* step -1 */
  --text-m: clamp(1rem, 0.8929rem + 0.4762vw, 1.25rem); /* step  0 — base body */
  --text-l: clamp(1.2rem, 1.0446rem + 0.6905vw, 1.5625rem); /* step  1 */
  --text-xl: clamp(1.44rem, 1.2201rem + 0.9774vw, 1.9531rem); /* step  2 */
  --text-xxl: clamp(1.728rem, 1.4223rem + 1.3589vw, 2.4414rem); /* step  3 */
  --text-xxxl: clamp(2.0736rem, 1.6544rem + 1.8632vw, 3.0518rem); /* step  4 */
  --text-display: clamp(2.4883rem, 1.9199rem + 2.5264vw, 3.8147rem); /* step  5 */

  /* --- Fluid Typography (Headings) --- */
  /* Headings reuse the same scale — no new values, just semantic aliases */
  --h1: var(--text-xxxl);
  --h2: var(--text-xxl);
  --h3: var(--text-xl);
  --h4: var(--text-l);
  --h5: var(--text-m);
  --h6: var(--text-s);

  /* Other */
  --border-radius: 10px;
}