/* Family reference tokens. */
@theme {
  --color-warm-canvas: #fbfaf9;
  --color-stone-surface: #f2f0ed;
  --color-parchment-card: #f8f7f4;
  --color-graphite: #474645;
  --color-charcoal-primary: #343433;
  --color-midnight: #121212;
  --color-obsidian: #000000;
  --color-ash: #848281;
  --color-fog: #c6c6c6;
  --color-smoke: #a7a7a7;
  --color-pepper: #282624;
  --color-ember-orange: #ff3e00;
  --color-meadow-green: #00ca48;
  --color-sky-blue: #0090ff;
  --color-sunburst-yellow: #ffbb26;
  --color-deep-amber: #d48f00;
  --color-ocean-blue: #0086fc;
  --color-ice-blue: #64c6ff;
  --color-spearmint: #00c978;
  --color-flamingo: #ff58ae;
  --color-violet-pop: #9f4fff;
  --color-coral-red: #ff2b3a;
  --color-valid-green: #00c454;
  --spacing-radius-tags: 6px;
  --spacing-radius-cards: 10px;
  --spacing-radius-icons: 40px;
  --spacing-radius-inputs: 10px;
  --spacing-radius-buttons: 32px;
  --spacing-radius-cardslarge: 24px;
  --spacing-radius-buttonspill: 32px;
  --spacing-radius-illustrations: 72px;
  --spacing-elementgap: 8-12px;
  --spacing-sectiongap: 120-180px;
  --spacing-cardpadding: 32px;
  --spacing-pagemaxwidth: 1200px;
  --radius-tags: 6px;
  --radius-cards: 10px;
  --radius-icons: 40px;
  --radius-inputs: 10px;
  --radius-buttons: 32px;
  --radius-cardslarge: 24px;
  --radius-buttonspill: 32px;
  --radius-illustrations: 72px;
}