:root {
  color-scheme: dark;

  --ink-950: #07070b;
  --ink-900: #0b0a12;
  --ink-850: #11101a;
  --ink-800: #171523;
  --paper-100: #fffaf7;
  --paper-200: #eee7e8;
  --paper-300: #c8bec5;
  --paper-400: #918891;
  --rose-400: #ff5d9d;
  --rose-500: #ec3d89;
  --violet-400: #9c83ff;
  --violet-500: #7659e8;
  --cyan-300: #77d7dc;
  --cyan-400: #4abac5;
  --warm-300: #f5bb91;

  --text-primary: var(--paper-100);
  --text-secondary: rgba(255, 250, 247, 0.72);
  --text-tertiary: rgba(255, 250, 247, 0.5);
  --line-soft: rgba(255, 250, 247, 0.12);
  --line-strong: rgba(255, 250, 247, 0.24);

  --gradient-brand: linear-gradient(112deg, var(--rose-400) 0%, var(--violet-400) 52%, var(--cyan-300) 100%);
  --gradient-dusk: radial-gradient(circle at 74% 22%, rgba(255, 93, 157, 0.22), transparent 35%),
    radial-gradient(circle at 24% 66%, rgba(74, 186, 197, 0.14), transparent 38%);
  --gradient-deep: linear-gradient(180deg, var(--ink-950) 0%, #0d0912 52%, var(--ink-950) 100%);

  --font-display: "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Avenir Next", "Segoe UI Variable Text", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.73rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.98rem, 0.91rem + 0.22vw, 1.08rem);
  --step-1: clamp(1.12rem, 1rem + 0.48vw, 1.36rem);
  --step-2: clamp(1.42rem, 1.17rem + 0.96vw, 2rem);
  --step-3: clamp(2rem, 1.45rem + 2vw, 3.2rem);
  --step-4: clamp(3rem, 1.9rem + 4.4vw, 6.6rem);
  --step-5: clamp(4.2rem, 2rem + 8.8vw, 11rem);

  --space-1: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
  --space-2: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-3: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-4: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  --space-5: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
  --space-6: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --space-7: clamp(5rem, 3rem + 8vw, 11rem);
  --space-8: clamp(7rem, 4rem + 12vw, 16rem);

  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --content-max: 92rem;
  --measure: 44rem;
  --header-height: 4rem;

  --radius-sm: 0.65rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;

  --layer-base: 0;
  --layer-scene: 2;
  --layer-header: 50;
  --layer-menu: 45;
  --layer-focus: 100;

  --duration-fast: 180ms;
  --duration-medium: 480ms;
  --duration-slow: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-device: 0 4rem 8rem rgba(0, 0, 0, 0.45), 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}