:root {
  --font-sans: "Manrope", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-display: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  --color-bg: #0A0A0A;
  --color-bg-soft: #111111;
  --color-panel: #161616;
  --color-panel-strong: #1e1e1e;
  --color-line: #262626;
  --color-line-strong: #383838;
  --color-text: #f0f0ee;
  --color-text-soft: #777777;
  --color-accent: #E5484D;
  --color-accent-soft: rgba(229, 72, 77, 0.12);
  --color-accent-2: #E5484D;
  --color-accent-2-soft: rgba(229, 72, 77, 0.08);
  --color-info: #6b8ef0;
  --color-danger: #E5484D;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.25), 0 16px 36px rgba(0, 0, 0, 0.4);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  --text-display: clamp(2rem, 1.2rem + 2vw, 3.2rem);
  --text-h1: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  --text-h2: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  --text-body: 0.975rem;
  --text-small: 0.84rem;
  --text-caption: 0.75rem;

  color-scheme: dark;

  /* dark palette — used by nav, footer, and home page */
  --dark-bg: #0A0A0A;
  --dark-surface: #111111;
  --dark-border: #1F1F1F;
  --dark-border-sub: #1A1A1A;
  --dark-text: #FFFFFF;
  --dark-muted: #666666;
  --dark-dim: #505050;
  --dark-accent: #E5484D;
  --dark-accent-glow: rgba(229, 72, 77, 0.14);
}