/* ── Golden Summer Fields — Dark Theme ────────────────────────────────────────
   Loaded AFTER tokens.css. Everything the site paints is driven by the custom
   properties below, so flipping [data-theme="dark"] on the root repaints the
   whole surface: page, header, cards, tables, code blocks and the interiors of
   the hand-authored inline SVG diagrams.

   The SVG remap at the bottom keys on the EXACT palette hexes baked into the
   diagrams. Diagram *structure* and *labels* are drawn with currentColor, so
   they follow the body text automatically; only the panel fills and the
   saturated data marks need an explicit dark counterpart.
   ────────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --color-bg:            #16180f;
  --color-surface:       #1e2114;
  --color-surface-alt:   #272b19;
  --color-border:        #4d5330;
  --color-border-light:  #3a3f24;

  --color-primary:       #b9cc7a;
  --color-primary-hover: #d3e39a;
  --color-primary-light: #8a9e4e;

  --color-accent:        #e8c45a;
  --color-accent-hover:  #f2d98a;
  --color-accent-light:  #f2d98a;

  --color-text:          #e8e4d2;
  --color-text-muted:    #b3ae95;
  --color-text-light:    #97927a;

  --color-code-bg:       #1b1e12;
  --color-code-border:   #3d4327;

  --color-link:          #c3d68a;
  --color-link-hover:    #f2d98a;

  --color-header-bg:     #10130b;
  --color-header-text:   #e8e4d2;
  --color-footer-bg:     #0d0f08;
  --color-footer-text:   #b3ae95;

  /* Ink used on top of the saturated brand/accent fills that stay light-on-dark */
  --color-on-accent:     #16180f;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.65);
}

/* Light theme keeps its original ink-on-accent value. */
:root { --color-on-accent: #ffffff; }

/* ── Surfaces that must stay dark in BOTH themes ──────────────────────────── */
/* The hero and the card icons are brand-coloured panels carrying white text.
   In dark mode --color-primary lightens, so pin these gradients explicitly. */
:root[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #2f3d15 0%, #3d5020 55%, #4d6224 100%);
}
:root[data-theme="dark"] .area-card-icon {
  background: linear-gradient(135deg, #46561f 0%, #5f7231 100%);
}

/* ── Controls whose ink sits on an accent fill ────────────────────────────── */
:root[data-theme="dark"] .btn-primary {
  color: var(--color-on-accent);
}
:root[data-theme="dark"] .btn-primary:hover {
  color: var(--color-on-accent);
}
:root[data-theme="dark"] .copy-btn:hover,
:root[data-theme="dark"] .copy-btn.copied {
  color: var(--color-on-accent);
}
:root[data-theme="dark"] .task-list-item input[type="checkbox"] {
  background: var(--color-surface-alt);
}
:root[data-theme="dark"] .task-list-item input[type="checkbox"]:checked::after {
  border-color: var(--color-on-accent);
}
:root[data-theme="dark"] ::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ── Syntax highlighting — dark counterparts ──────────────────────────────── */
:root[data-theme="dark"] code[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"] {
  color: #e8e4d2;
}
:root[data-theme="dark"] .token.comment,
:root[data-theme="dark"] .token.prolog,
:root[data-theme="dark"] .token.doctype,
:root[data-theme="dark"] .token.cdata           { color: #a09a84; }
:root[data-theme="dark"] .token.punctuation     { color: #b9b3a0; }
:root[data-theme="dark"] .token.property,
:root[data-theme="dark"] .token.tag,
:root[data-theme="dark"] .token.constant,
:root[data-theme="dark"] .token.symbol,
:root[data-theme="dark"] .token.deleted         { color: #e8956a; }
:root[data-theme="dark"] .token.boolean,
:root[data-theme="dark"] .token.number          { color: #e0b169; }
:root[data-theme="dark"] .token.selector,
:root[data-theme="dark"] .token.attr-name,
:root[data-theme="dark"] .token.string,
:root[data-theme="dark"] .token.char,
:root[data-theme="dark"] .token.builtin,
:root[data-theme="dark"] .token.inserted        { color: #a9cf7e; }
:root[data-theme="dark"] .token.operator,
:root[data-theme="dark"] .token.entity,
:root[data-theme="dark"] .token.url             { color: #b9b3a0; }
:root[data-theme="dark"] .token.atrule,
:root[data-theme="dark"] .token.attr-value,
:root[data-theme="dark"] .token.keyword         { color: #c3d68a; }
:root[data-theme="dark"] .token.function,
:root[data-theme="dark"] .token.class-name      { color: #e8c45a; }
:root[data-theme="dark"] .token.regex,
:root[data-theme="dark"] .token.important,
:root[data-theme="dark"] .token.variable        { color: #ddb96e; }

/* ── Inline-SVG interiors ─────────────────────────────────────────────────── */
/* Keyed on the exact palette hexes baked into the diagrams. Pale panel fills
   invert to dark panels; the dark ink drawn on top of them inverts to light;
   saturated data/brand marks stay saturated but are lifted for contrast. */

/* Full-canvas diagram background → the dark page surface */
:root[data-theme="dark"] svg [fill="#faf7ef"] { fill: #16180f; }

/* Pale panel fills → dark panels */
:root[data-theme="dark"] svg [fill="#e8e0c8"] { fill: #2b3018; }
:root[data-theme="dark"] svg [fill="#c8d8b0"] { fill: #33401f; }
:root[data-theme="dark"] svg [fill="#d4c4e8"] { fill: #332a4a; }
:root[data-theme="dark"] svg [fill="#f5f1e4"] { fill: #23271a; }

/* Dark ink drawn on those panels → light ink */
:root[data-theme="dark"] svg [fill="#4a3f1e"] { fill: #ded2ac; }
:root[data-theme="dark"] svg [fill="#6b5c2e"] { fill: #cbbd8e; }
:root[data-theme="dark"] svg [fill="#2e4a12"] { fill: #bcdb95; }
:root[data-theme="dark"] svg [fill="#3d5c1e"] { fill: #a9cf7e; }
:root[data-theme="dark"] svg [fill="#3a1e5a"] { fill: #cbb8e8; }
:root[data-theme="dark"] svg [fill="#5a3a7a"] { fill: #b79ad6; }
:root[data-theme="dark"] svg [fill="#8c4c1e"] { fill: #e8a678; }

/* Saturated marks and connectors → lifted for a dark canvas */
:root[data-theme="dark"] svg [fill="#b5a642"]   { fill: #d8c96a; }
:root[data-theme="dark"] svg [stroke="#b5a642"] { stroke: #d8c96a; }
:root[data-theme="dark"] svg [fill="#a89a6a"]   { fill: #cbbd8e; }
:root[data-theme="dark"] svg [stroke="#a89a6a"] { stroke: #cbbd8e; }
:root[data-theme="dark"] svg [fill="#c8b97a"]   { fill: #d8c98a; }
:root[data-theme="dark"] svg [stroke="#c8b97a"] { stroke: #d8c98a; }
:root[data-theme="dark"] svg [fill="#8fa86e"]   { fill: #a9cf7e; }
:root[data-theme="dark"] svg [stroke="#8fa86e"] { stroke: #a9cf7e; }
:root[data-theme="dark"] svg [fill="#6b8a3a"]   { fill: #a9cf7e; }
:root[data-theme="dark"] svg [stroke="#6b8a3a"] { stroke: #a9cf7e; }
:root[data-theme="dark"] svg [fill="#c87a4a"]   { fill: #e8956a; }
:root[data-theme="dark"] svg [stroke="#c87a4a"] { stroke: #e8956a; }
:root[data-theme="dark"] svg [fill="#c8783c"]   { fill: #e8956a; }
:root[data-theme="dark"] svg [stroke="#c8783c"] { stroke: #e8956a; }
:root[data-theme="dark"] svg [fill="#7a5a9a"]   { fill: #b79ad6; }
:root[data-theme="dark"] svg [stroke="#7a5a9a"] { stroke: #b79ad6; }

/* ── Theme toggle control ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-header-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--color-accent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the sun in dark mode (click → go light) and the moon in light mode. */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }