/* Google Fonts — DM Sans (sans) + Instrument Serif (display).
 * Loaded via @import so all microsites pick them up through this one
 * stylesheet rather than each repeating the <link> tag. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ─────────────────────────────────────────────────────────────────────
 *  Shared microsite base
 *
 *  Every microsite under /microsites/* links this file first, then layers
 *  its own component styles on top. The goal is one source of truth for:
 *
 *    - fonts            (DM Sans + Instrument Serif, matching the site)
 *    - color tokens     (light and dark theme, same palette as the site)
 *    - SEEDS family colors
 *    - the home button  (top-left back-to-/ link, was duplicated 6×)
 *    - body baseline    (reset, font-family, font-size, color)
 *
 *  Aliases: each microsite was built standalone with its own naming
 *  (--bg vs --color-bg, --ink vs --color-text, --accent vs --gold, etc.).
 *  Rather than rewrite every selector across six files, this file
 *  defines the canonical tokens and aliases the legacy names so each
 *  microsite's existing CSS resolves correctly.
 *
 *  Keep this file in sync with src/styles/tokens.css when palette values
 *  change. Until there's a build step that does it automatically, it's
 *  a manual copy.
 * ───────────────────────────────────────────────────────────────────── */


/* ── Color · Light theme (default) ───────────────────────────────── */
:root {
  --bg:           #fdfaf4;
  --bg-2:         #f6f1e8;
  --bg-tint:      #efe8da;

  --text:         #1c1812;
  --muted:        #62594b;
  --faint:        #9b907d;

  --accent:       #8e662f;
  --accent-2:     #b88640;
  --rule:         rgba(28, 24, 18, 0.10);

  --border:       rgba(28, 24, 18, 0.12);
  --border-hover: rgba(28, 24, 18, 0.25);

  --surface:      rgba(255, 252, 246, 0.86);
  --surface-2:    #f2efe9;
  --surface-3:    #efe7da;

  /* SEEDS family colors — categorical, constant across themes */
  --seeds-similarity: #59b8b2;
  --seeds-expedience: #d79a46;
  --seeds-experience: #7497e2;
  --seeds-distance:   #a282d7;
  --seeds-safety:     #cc6670;

  /* Aliases for the legacy naming each microsite shipped with. These
   * all point at the canonical tokens above, so microsites that wrote
   * --color-bg, --ink, --gold, etc. keep working unchanged. */
  --color-bg:           var(--bg);
  --color-bg-2:         var(--bg-2);
  --color-surface:      var(--surface);
  --color-surface-2:    var(--surface-2);
  --color-text:         var(--text);
  --color-ink:          var(--text);
  --ink:                var(--text);
  --color-text-muted:   var(--muted);
  --color-text-faint:   var(--faint);
  --color-accent:       var(--accent);
  --color-accent-dark:  var(--accent);
  --color-border:       var(--border);
  --color-border-hover: var(--border-hover);
  --gold:               var(--accent);

  --color-seeds-similarity: var(--seeds-similarity);
  --color-seeds-expedience: var(--seeds-expedience);
  --color-seeds-experience: var(--seeds-experience);
  --color-seeds-distance:   var(--seeds-distance);
  --color-seeds-safety:     var(--seeds-safety);

  /* Typography */
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-sans:    "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius: var(--radius-md); /* alias for microsites using just --radius */

  /* Motion */
  --motion: 200ms cubic-bezier(.16, 1, .3, 1);
  --motion-base: var(--motion);
  --transition: var(--motion);
  --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --transition-panel: 300ms cubic-bezier(.16, 1, .3, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(42, 34, 25, 0.06);
  --shadow-md: 0 10px 28px rgba(42, 34, 25, 0.10);
  --shadow-lg: 0 24px 60px rgba(42, 34, 25, 0.12);
}


/* ── Color · Dark theme ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:           #0d1115;
  --bg-2:         #161b21;
  --bg-tint:      #1d232a;

  --text:         #ece6dc;
  --muted:        #a09686;
  --faint:        #665e52;

  --accent:       #c89d54;
  --accent-2:     #d8af69;
  --rule:         rgba(255, 255, 255, 0.10);

  --border:       rgba(255, 255, 255, 0.10);
  --border-hover: rgba(255, 255, 255, 0.20);

  --surface:      rgba(22, 27, 33, 0.85);
  --surface-2:    #1f2428;
  --surface-3:    #202935;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.50);
}

/* Some microsites toggle theme via body classes rather than the root
 * attribute. Make both work. */
body.theme-dark {
  --bg:           #0d1115;
  --bg-2:         #161b21;
  --text:         #ece6dc;
  --muted:        #a09686;
  --faint:        #665e52;
  --accent:       #c89d54;
  --border:       rgba(255, 255, 255, 0.10);
  --surface:      rgba(22, 27, 33, 0.85);
  --surface-2:    #1f2428;
}


/* ── Reset + body baseline ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Bump the root size so every rem-based value across every microsite
 * scales together: 1rem = 18px (body) instead of the browser default 16px.
 * This is the single dial for "make the microsite type bigger." */
html { font-size: 18px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--motion), color var(--motion);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Home button (back to /, top-left) ───────────────────────────── */
.hsay-home {
  position: fixed;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 1000;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 250, 244, 0.82);
  border: 1px solid rgba(28, 24, 18, 0.14);
  border-radius: 8px;
  color: rgb(60, 52, 40);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 180ms cubic-bezier(.16, 1, .3, 1),
              color 180ms cubic-bezier(.16, 1, .3, 1),
              background 180ms cubic-bezier(.16, 1, .3, 1);
}
.hsay-home:hover,
.hsay-home:focus-visible {
  border-color: rgb(142, 102, 47);
  color: rgb(142, 102, 47);
  outline: none;
  text-decoration: none;
}
:root[data-theme="dark"] .hsay-home,
html[data-theme="dark"] .hsay-home,
body.theme-dark .hsay-home {
  background: rgba(22, 27, 33, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgb(210, 202, 188);
}
:root[data-theme="dark"] .hsay-home:hover,
html[data-theme="dark"] .hsay-home:hover,
body.theme-dark .hsay-home:hover,
:root[data-theme="dark"] .hsay-home:focus-visible,
html[data-theme="dark"] .hsay-home:focus-visible,
body.theme-dark .hsay-home:focus-visible {
  border-color: rgb(200, 157, 84);
  color: rgb(200, 157, 84);
}
.hsay-home svg { display: block; width: 17px; height: 17px; }


/* ── Skip link (accessibility: visible only on keyboard focus) ───── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 100;
  text-decoration: none;
  border-radius: 6px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ── Selection highlight, focus ring ─────────────────────────────── */
::selection {
  background: rgba(142, 102, 47, 0.25);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}