:root {
  /* Colors */
  --color-porcelain-cream: #fcf6ec;
  --color-espresso-ink: #2e2521;
  --color-parchment-border: #d3ccc3;
  --color-stone-haze: #cec1b2;
  --color-ivory-sand: #f4e8d7;
  --color-daylight-wash: #fdf0c7;
  --color-peach-wash: #fdc6b3;
  --color-sunlit-stone-gradient: #c4b3a3;
  --gradient-sunlit-stone-gradient: linear-gradient(266.47deg, #c4b3a3 41.41%, #9f8e7a 97.58%);

  /* Typography — Font Families */
  --font-systemia: 'Systemia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0px;
  --text-body: 14px;
  --leading-body: 1.4;
  --tracking-body: 0px;
  --text-nav: 14px;
  --leading-nav: 1.2;
  --tracking-nav: 0px;
  --text-button: 14px;
  --leading-button: 1;
  --tracking-button: 0px;
  --text-heading: 36px;
  --leading-heading: 1;
  --tracking-heading: 0px;
  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: 0px;
  --text-metric-display: 170px;
  --leading-metric-display: 0.9;
  --tracking-metric-display: -13.6px;
  --text-masthead-display: 240px;
  --leading-masthead-display: 0.8;
  --tracking-masthead-display: 0px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-35: 35px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-60: 60px;
  --spacing-100: 100px;
  --spacing-120: 120px;

  /* Layout */
  --section-gap: 30px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-full: 500px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-pills: 9999px;
  --radius-inputs: 0px;
  --radius-buttons: 20px;
  --radius-circularcontrols: 100%;
  --radius-decorativecapsules: 500px;

  /* Surfaces */
  --surface-porcelain-canvas: #fcf6ec;
  --surface-daylight-field: #fdf0c7;
  --surface-ivory-sand-surface: #f4e8d7;
  --surface-peach-field: #fdc6b3;
  --surface-espresso-surface: #2e2521;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-porcelain-cream: #161311;
  --color-espresso-ink: #f3eee6;
  --color-parchment-border: #3d342f;
  --color-stone-haze: #2a2420;
  --color-ivory-sand: #241f1c;
  --color-daylight-wash: #2c2818;
  --color-peach-wash: #3d2c28;
  --color-sunlit-stone-gradient: #3a322c;
  --gradient-sunlit-stone-gradient: linear-gradient(266.47deg, #2a2420 41.41%, #3a322c 97.58%);
  --surface-porcelain-canvas: #161311;
  --surface-daylight-field: #2c2818;
  --surface-ivory-sand-surface: #241f1c;
  --surface-peach-field: #3d2c28;
  --surface-espresso-surface: #f3eee6;
  --muted: #c9bdb2;
}