/* ============================================================
   Plan-Do-Reflect — design tokens
   Every page/component should read colors and type from these
   custom properties, never hardcode a hex value or font name.
   To add a new style direction: copy a [data-theme="x"] block,
   rename it, adjust values, add a swatch button in index.html.

   Command Blue was dropped and the remaining three relettered/
   reordered: A = Kinetic Signal (default), B = Studio Ledger,
   C = Bright Margin.
   ============================================================ */

:root {
  /* fallback (theme A = Kinetic Signal) so nothing is unstyled before data-theme resolves */
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* Big page-title elements (page-hero h1, homepage hero-title) use this
     fixed font across all three themes, chosen after an in-page A/B
     picker (since removed) — unlike --font-heading, not redefined per
     [data-theme]. */
  --font-title: 'Golos Text', sans-serif;

  /* For occasional handwritten-style annotations inside visuals only —
     never for real content/body copy. Print-style handwriting, not
     cursive/calligraphy — disconnected letters, stays legible at small
     sizes. Not a serif, so it doesn't conflict with the "no serif fonts"
     rule. Loaded in the shared Google Fonts <link> on every page (not
     conditionally per-page) — a page using .annotation without the font
     loaded silently falls back to the browser's generic 'cursive' keyword,
     which renders as real calligraphy on most systems. That's exactly
     what happened once already; load it everywhere so it can't recur. */
  --font-hand: 'Patrick Hand', cursive;

  /* System monospace stack for code/commands in lesson pages. Not a themed
     design choice (unlike --font-heading/--font-body), so defined once
     here rather than per [data-theme]. */
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Terminal-style surface for code blocks. Fixed across all three theme
     directions — same reasoning as the status colors below: a code block
     should read as a code block regardless of the active theme, not shift
     to a light background under Studio Ledger. */
  --code-bg: #1e1e24;
  --code-text: #e7e7e2;
  --code-text-dim: #9a9aa0;

  /* Red/Amber/Green status convention — universal traffic-light meaning,
     so unlike --accent these stay fixed across all three theme directions
     rather than being redefined per [data-theme]. --status-blue added
     alongside them for the same reason, first used by team-building.html's
     DISC-style color assessment (Red/Yellow/Green/Blue), where the colors
     themselves are the content's own vocabulary, not decoration. */
  --status-green: #16a34a;
  --status-amber: #f59e0b;
  --status-red: #dc2626;
  --status-blue: #2563eb;

  /* Fixed marker for cross-cutting content that doesn't belong to any one
     altitude (Personal/Team/Organization) — same "stays fixed across all
     three theme directions" reasoning as the status colors above, so the
     bracket treatment reads consistently regardless of active theme. */
  --accent-gold: #a9790a;
}

/* ---------- Direction A — Kinetic Signal (gray / black / bright yellow) — default ---------- */
[data-theme="a"] {
  --bg-page: #ebebe6;
  --bg-nav: #111215;
  --bg-sidebar: #f4f4f1;
  --bg-content: #ffffff;
  --border: #e0e0da;

  --text-nav: #a8a9ac;
  --text-nav-active: #ffffff;
  --text-heading: #111215;
  --text-body: #45464a;
  --text-caption: #6b6c70;

  --logo-color: #facc15;
  --accent: #facc15;
  --accent-strong: #2b2200;

  --sidebar-text: #45464a;
  --sidebar-active-bg: #facc15;
  --sidebar-active-text: #111215;

  --tag-primary-bg: #facc15;
  --tag-primary-text: #2b2200;
  --tag-secondary-bg: #e7e7e2;
  --tag-secondary-text: #55565a;

  /* Matches the homepage flywheel wedge colors for this theme */
  --stage-plan: #facc15;
  --stage-do: #111215;
  --stage-reflect: #c7c7c1;

  --font-heading: 'Sora', sans-serif;
  --font-body: 'Work Sans', sans-serif;
}

/* ---------- Direction B — Studio Ledger (dusty rose / gray / white) ---------- */
[data-theme="b"] {
  --bg-page: #fdfbfa;
  --bg-nav: #ffffff;
  --bg-sidebar: #faf5f4;
  --bg-content: #ffffff;
  --border: #eee0de;

  --text-nav: #4a4340;
  --text-nav-active: #b06b76;
  --text-heading: #33302d;
  --text-body: #33302d;
  --text-caption: #6b6460;

  --logo-color: #c98a93;
  --accent: #c98a93;
  --accent-strong: #8a4753;

  --sidebar-text: #6b6460;
  --sidebar-active-bg: #f1e3e1;
  --sidebar-active-text: #8a4753;

  --tag-primary-bg: #f1e3e1;
  --tag-primary-text: #8a4753;
  --tag-secondary-bg: #eeece9;
  --tag-secondary-text: #6b6460;

  /* Matches the homepage flywheel wedge colors for this theme */
  --stage-plan: #c98a93;
  --stage-do: #b06b76;
  --stage-reflect: #8a4753;

  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Work Sans', sans-serif;
}

/* ---------- Direction C — Bright Margin (white / gray / lime) ---------- */
[data-theme="c"] {
  --bg-page: #f2f2ef;
  --bg-nav: #111214;
  --bg-sidebar: #fafafa;
  --bg-content: #ffffff;
  --border: #e6e6e3;

  --text-nav: #b8b9bc;
  --text-nav-active: #ffffff;
  --text-heading: #111214;
  --text-body: #45464a;
  --text-caption: #6b6c70;

  --logo-color: #d7ff4b;
  --accent: #d7ff4b;
  --accent-strong: #1c2400;

  --sidebar-text: #4a4b4d;
  --sidebar-active-bg: #111214;
  --sidebar-active-text: #d7ff4b;

  --tag-primary-bg: #d7ff4b;
  --tag-primary-text: #1c2400;
  --tag-secondary-bg: #ececea;
  --tag-secondary-text: #55565a;

  /* Matches the homepage flywheel wedge colors for this theme */
  --stage-plan: #111214;
  --stage-do: #d7ff4b;
  --stage-reflect: #e9e9e6;

  --font-heading: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}