/* Shared theme layer for every page in marketing/ -- the only file that
   should ever need editing to add, tweak, or retire a theme.

   Every component rule across every page in this folder reads colors and
   fonts exclusively through the --bg/--surface/--ink/--purple/etc. custom
   properties defined here (never a hardcoded hex, never a hardcoded
   font-family) -- so adding a fourth theme is "add one new
   [data-theme="name"] block defining these ~12 properties," full stop.
   No component CSS anywhere else needs to change, and no other file needs
   editing. If you ever catch a component rule with a literal color instead
   of a var(--...), that's a bug in that rule, not something to route
   around with another override block here.

   :root (no data-theme attribute) is "Flat" -- the permanent default look
   of this site. [data-theme="teal"] is the one alternate, switched via the
   button theme.js injects into every page. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --rule: #e5e7eb;
  --ink: #111827;
  --ink-muted: #4b5563;
  --ink-faint: #9ca3af;

  --purple: #f2673c;   /* primary: actions, links, active states */
  --green: #8b5cf6;    /* secondary: supporting accents */
  --red: #dc2626;      /* danger */
  --amber: #d97706;    /* warning */

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --measure: 65ch;
}

[data-theme="teal"] {
  --bg: #2f3b4c;
  --surface: #26303d;
  --surface-2: #34404f;
  --rule: #3f4c5e;
  --ink: #f5f7fa;
  --ink-muted: #a9b4c4;
  --ink-faint: #7c8898;

  --purple: #2dd4bf;   /* primary */
  --green: #93c5fd;    /* secondary */
  --red: #f87171;
  --amber: #fbbf24;
}

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 30;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--ink-faint);
}