:root {
  --color-bg: #0a0612;
  --color-bg-elevated: #14091f;
  --color-bg-panel: rgba(20, 9, 31, 0.6);
  --color-bg-panel-strong: rgba(28, 15, 46, 0.72);
  --color-text: #f5eef7;
  --color-text-muted: #a89bb4;
  --color-text-dim: #8a7a96;
  --color-text-faint: #8a7a96;
  --color-ink: #14091f;
  --color-accent: #f4a5c4;
  --color-accent-deep: #d63384;
  --color-accent-soft: #f7d4b8;
  --color-border: rgba(245, 238, 247, 0.1);
  --color-border-soft: rgba(245, 238, 247, 0.08);
  --color-border-faint: rgba(245, 238, 247, 0.07);
  --color-border-hairline: rgba(245, 238, 247, 0.06);
  --color-border-accent: rgba(244, 165, 196, 0.15);
  --color-border-accent-mid: rgba(244, 165, 196, 0.22);
  --color-border-accent-strong: rgba(244, 165, 196, 0.28);
  --color-border-accent-focus: rgba(244, 165, 196, 0.55);
  --gradient-accent: linear-gradient(90deg, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384);
  --gradient-accent-btn: linear-gradient(90deg, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384);
  --gradient-progress: linear-gradient(90deg, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384, #f4a5c4, #f7d4b8, #f4a5c4, #d63384);
  --motion-gradient: 24s linear infinite;
  --gradient-hero-bottom: linear-gradient(to bottom, rgba(10, 6, 18, 0) 40%, #0a0612 100%);
  --gradient-hero-sides: linear-gradient(to right, #0a0612 0%, rgba(10, 6, 18, 0) 15%, rgba(10, 6, 18, 0) 85%, #0a0612 100%);
  --gradient-statement: linear-gradient(90deg, rgba(10, 6, 18, 0.88) 0%, rgba(10, 6, 18, 0.66) 45%, rgba(10, 6, 18, 0.9) 100%);
  --shadow-accent: 0 18px 50px -18px rgba(214, 51, 132, 0.75);
  --shadow-accent-lg: 0 60px 140px -60px rgba(214, 51, 132, 0.55);
  --shadow-card: 0 40px 90px -50px rgba(214, 51, 132, 0.7);
  --shadow-form: 0 60px 130px -60px rgba(214, 51, 132, 0.7);
  --font-display: "Syne", "Avenir Next", system-ui, sans-serif;
  --font-body: "Manrope", "Avenir Next", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-page-x: clamp(16px, 4vw, 48px);
  --space-section-y: clamp(48px, 8vw, 130px);
  --space-section-y-sm: clamp(40px, 7vw, 110px);
  --container-max: 1280px;
  --container-narrow: 1180px;
  --container-wide: 1440px;
  --header-height: 72px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 420ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
  --transition-fast: var(--motion-duration-fast) var(--motion-ease-standard);
  --transition-base: var(--motion-duration-base) var(--motion-ease-out);
  --touch-min: 44px;
  --glow-opacity: 0.4;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-20: 80px;
  --ui-space-24: 96px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-type-h1: clamp(2.25rem, 1.5rem + 3.8vw, 5rem);
  --ui-type-h2: clamp(1.75rem, 1.35rem + 2.3vw, 3.25rem);
  --ui-type-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  --ui-leading-heading: 1.08;
  --ui-leading-body: 1.55;
  --ui-tracking-heading: -0.02em;
  --ui-touch-target: 44px;
  --ui-duration: 180ms;
  --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ui-focus-color: var(--color-accent);
}