:root {
  color-scheme: dark;

  --color-bg: #0e091a;
  --color-bg-raised: #100b1e;
  --color-surface: #161028;
  --color-surface-2: #1d1533;
  --color-bg-sunken: #040208;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: #f2eff9;
  --color-text-muted: #c9c1dc;
  --color-text-faint: #6f6789;

  --color-accent: #2ab3b6;
  --color-accent-strong: #45cdd0;
  --color-accent-soft: rgba(42, 179, 182, 0.14);
  --color-accent-ink: #062526;
  --color-violet: #7a4dd8;
  --color-violet-deep: #2f0c61;

  --gradient-brand: linear-gradient(120deg, var(--color-accent) 0%, #4f8fd4 52%, var(--color-violet) 100%);

  /* Card surfaces always sit opposite in tone to the band behind them; base.css flips these on the lighter band. */
  --card-bg: var(--color-surface);
  --card-bg-grad: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  --card-inner-bg: var(--color-bg);
  --field-bg: rgba(4, 2, 12, 0.55);

  --font-display: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", "Noto Kufi Arabic", sans-serif;

  --fs-h1: clamp(2.5rem, 5.4vw, 4.1rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-12: 12rem;

  --container: 1340px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --shadow-1: 0 2px 8px rgba(4, 2, 12, 0.4);
  --shadow-2: 0 16px 40px rgba(4, 2, 12, 0.5);
  --glow-accent: 0 0 0 1px rgba(42, 179, 182, 0.35), 0 8px 32px rgba(42, 179, 182, 0.12);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  --header-h: 72px;
  --marquee-h: 62px;
  --z-header: 50;
  --z-drawer: 60;
}