:root {
  color-scheme: light dark;

  --c-white: #ffffff;
  --c-lilac-100: #f4ebff;
  --c-lilac-200: #e9d8ff;
  --c-lilac-300: #e0aaff;
  --c-violet-400: #c77dff;
  --c-violet-500: #9d4edd;
  --c-violet-600: #7b2cbf;
  --c-violet-700: #5a189a;
  --c-violet-900: #240046;
  --c-night-950: #140926;
  --c-night-900: #20113a;
  --c-night-800: #2c1a4f;

  --bg: light-dark(var(--c-white), var(--c-night-950));
  --ink: light-dark(var(--c-violet-900), #f5eeff);
  --ink-soft: light-dark(#5d4b7a, #c4b5de);
  --surface: light-dark(var(--c-lilac-100), var(--c-night-900));
  --surface-strong: light-dark(var(--c-lilac-200), var(--c-night-800));
  --accent: light-dark(var(--c-violet-600), var(--c-violet-400));
  --accent-hover: light-dark(var(--c-violet-700), var(--c-lilac-300));
  --on-accent: light-dark(var(--c-white), #1d0838);
  --brand: light-dark(var(--c-violet-500), var(--c-violet-400));
  --focus: light-dark(var(--c-violet-500), var(--c-lilac-300));

  --icon: light-dark(var(--c-violet-600), var(--c-violet-400));
  --tone: light-dark(var(--c-lilac-300), #6a3fa6);
  --tile: var(--c-violet-600);
  --tile-icon: var(--c-white);
  --tile-tone: var(--c-lilac-300);

  --grid: light-dark(#ece1fa, #26163f);
  --candle-up: light-dark(var(--c-violet-500), var(--c-violet-400));
  --candle-down: #7d6a99;
  --candle-next: light-dark(#e6d5fb, #33215a);
  --candle-hot: light-dark(var(--c-violet-700), var(--c-lilac-300));
  --tip-bg: light-dark(var(--c-violet-900), #f5eeff);
  --tip-ink: light-dark(var(--c-white), var(--c-violet-900));

  --contact-bg: light-dark(var(--c-violet-700), var(--c-violet-600));
  --contact-ink: var(--c-white);
  --contact-soft: light-dark(#e8d9ff, #f1e6ff);
  --contact-quiet: light-dark(#6c25b4, #8d42d1);
  --contact-btn-ink: light-dark(var(--c-violet-700), var(--c-violet-600));

  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Shantell Sans', 'Comic Sans MS', cursive;

  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --step-3: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --step-hero: clamp(2.75rem, 0.6rem + 8.6vw, 6.75rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  --space-section: clamp(80px, 11vw, 148px);

  --r-panel: 28px;
  --r-block: 18px;
  --r-tile: 14px;
  --r-pill: 999px;
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}