:root {
  color-scheme: light;

  /* Brand: the violet of the app icon's gradient (go-port/build/darwin/appicon.png) */
  --brand-violet: #7c3aed;
  --brand-lavender: #a78bfa;
  --gradient-brand: linear-gradient(135deg, #8b5cf6, #6d28d9);
  --gradient-heading: linear-gradient(135deg, #101014 10%, var(--brand-violet) 100%);
  /* The titles' moving gradient: ink to violet twice, so it loops when it slides one title width */
  --gradient-heading-flow: linear-gradient(90deg, #101014, var(--brand-violet), #101014, var(--brand-violet), #101014);
  /* Violet sections: a pale lavender band, under the same ink-to-violet titles as the rest of the page.
     A see-through tint of the brand violet, a little deeper toward the bottom right */
  --gradient-band: linear-gradient(160deg, rgb(139 92 246 / 0.1), rgb(139 92 246 / 0.24));

  /* Accent: the brand violet, deep enough to read on the off-white page */
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-contrast: #ffffff;
  /* Violet text, like the small labels above the titles */
  --accent-text: var(--accent);

  /* A warm off-white page with near-black ink, after getartcraft.com. The demos and
     screenshots stay dark, like the app, and sit on it as framed pictures */
  --bg: #f2f1ee;
  --bg-alt: #e9e8e4;
  --bg-header: rgb(242 241 238 / 0.85);
  --surface: #faf9f7;

  --text: #101014;
  --text-muted: rgb(16 16 20 / 0.62);
  --border: rgb(16 16 20 / 0.12);
  --border-strong: rgb(16 16 20 / 0.24);

  --footer-bg: #101014;
  --footer-text: #f2f1ee;
  --footer-muted: rgb(242 241 238 / 0.6);
  --footer-border: rgb(242 241 238 / 0.12);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Big titles over normal-sized text, after typesafe.ai */
  --fs-display: 8rem;
  --fs-pretitle: 2.25rem;
  --fs-h2: 3.75rem;
  --fs-h3: 1.5rem;
  --fs-lead: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-small: 1rem;

  --container: 75rem;
  --header-h: 4.5rem;
  --section-pad: 5rem;

  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgb(16 16 20 / 0.08);
  --shadow-shot: 0 24px 48px -12px rgb(16 16 20 / 0.35), 0 8px 16px -8px rgb(16 16 20 / 0.2);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-slow: 0.6s;
}

/* Dark mode: every page's <html> starts with data-theme="dark"; the sun / moon in the menu (js/main.js)
   switches it. Near-black page, light ink;
   titles fade from ink to lavender, and the violet bands get deeper so they don't glare */
:root[data-theme="dark"] {
  color-scheme: dark;

  --gradient-heading: linear-gradient(135deg, #f2f1ee 10%, var(--brand-lavender) 100%);
  --gradient-heading-flow: linear-gradient(90deg, #f2f1ee, var(--brand-lavender), #f2f1ee, var(--brand-lavender), #f2f1ee);
  --gradient-band: linear-gradient(160deg, rgb(124 58 237 / 0.1), rgb(124 58 237 / 0.26));

  --accent-text: var(--brand-lavender);

  --bg: #0f0f13;
  --bg-alt: #1c1c22;
  --bg-header: rgb(15 15 19 / 0.85);
  --surface: #17171c;

  --text: #f2f1ee;
  --text-muted: rgb(242 241 238 / 0.66);
  --border: rgb(242 241 238 / 0.12);
  --border-strong: rgb(242 241 238 / 0.26);

  --footer-bg: #08080b;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-shot: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 8px 16px -8px rgb(0 0 0 / 0.4);
}

/* Tablets and phones turned sideways: titles a step smaller, a little less space between sections */
@media (max-width: 1023px) {
  :root {
    --fs-display: 5rem;
    --fs-pretitle: 1.75rem;
    --fs-h2: 3rem;
    --section-pad: 3.75rem;
  }
}

/* Phones: smaller titles and text, less space between sections */
@media (max-width: 760px) {
  :root {
    --fs-display: 3rem;
    --fs-pretitle: 1.375rem;
    --fs-h2: 2.25rem;
    --fs-lead: 1.125rem;
    --section-pad: 3rem;
  }
}