:root {
  color-scheme: dark;

  --font-sans: "Inter Variable", "SF Pro Display", "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-2xl: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --text-display: clamp(3rem, 6vw, 5.75rem);

  --leading-tight: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.65;

  --ink-strong: #f6f7fb;
  --ink: #c9ceda;
  --ink-muted: #878e9e;
  --ink-faint: #5f6675;

  --canvas: #080a0f;
  --canvas-raised: #0d1119;
  --surface: rgba(17, 22, 33, 0.76);
  --surface-strong: #131925;
  --surface-soft: rgba(255, 255, 255, 0.035);
  --border: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.14);

  --violet: #8f82ff;
  --violet-bright: #a99fff;
  --blue: #68b5ff;
  --mint: #56dfbf;
  --amber: #e5b96d;
  --success: #58dfb3;

  --gradient-brand: linear-gradient(135deg, var(--violet-bright), var(--blue) 58%, var(--mint));
  --gradient-page:
    radial-gradient(circle at 74% 8%, rgba(105, 84, 255, 0.11), transparent 33rem),
    radial-gradient(circle at 22% 32%, rgba(66, 158, 255, 0.07), transparent 30rem),
    linear-gradient(180deg, #0b0e15 0%, var(--canvas) 45%, #090c12 100%);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.34);
  --shadow-glow: 0 0 60px rgba(119, 102, 238, 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;

  --content-width: 1180px;
}