@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400%3B500%3B600%3B700%3B800&family=Syne:wght@500%3B600%3B700%3B800&display=swap');

:root {
  color-scheme: dark;

  --surface: #080711;
  --surface-deep: #05040b;
  --surface-raised: #1b1033;
  --surface-soft: #241344;
  --text: #f7f5fb;
  --muted: #b8b3c4;
  --cyan: #28d7ee;
  --violet: #8b3dff;
  --gradient-accent: linear-gradient(110deg, var(--violet), var(--cyan));

  --ink: #05040b;
  --paper: #080711;
  --forest: var(--cyan);
  --accent: var(--violet);
  --accent-strong: #6f2ee8;
  --mint: var(--cyan);

  --surface-dark: var(--surface-deep);
  --text-muted: var(--muted);
  --text-on-dark: var(--text);
  --text-on-forest: #ffffff;
  --border: #3a2e51;
  --focus: var(--cyan);

  --font-display: 'Syne', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.16vw, 0.96rem);
  --step-0: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.72vw, 1.65rem);
  --step-2: clamp(1.5rem, 1.28rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.55vw, 2.85rem);
  --step-4: clamp(2.5rem, 1.9rem + 3.2vw, 4.5rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: clamp(4rem, 8vw, 7rem);

  --content-width: 92rem;
  --measure: 68ch;
  --radius-sm: 0.35rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.75rem;
  --shadow-soft: 0 1rem 3rem rgb(23 28 33 / 10%);
  --duration-fast: 160ms;
  --duration-medium: 320ms;
  --ease-out: cubic-bezier(.2, .75, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-medium: 0.01ms;
  }
}