/* ── themes.css ──────────────────────────────────────────────────────────
   Semantic surface layer. Components consume the variables defined here;
   each [data-theme="..."] block rebinds them to a different brand ground.

   The contract:
     --ground   page background
     --surface  subtle raised surface (cards, inputs, chips)
     --fore     primary foreground (text, marks)
     --fore-2   secondary foreground (meta, captions, dividers' kicker text)
     --rule     hairline / divider color on --ground
     --rule-2   even softer hairline
     --accent   the operator green signal — constant across themes
     --accent-fore  type/icon color on top of --accent

   Mode pool (set in index.html before paint):
     dark  → ink · cobalt · moss · rose
     light → sand · bone
   ─────────────────────────────────────────────────────────────────────── */

/* Sensible default before the inline picker runs, so SSR or no-JS still renders. */
:root {
  --ground:      var(--ink);
  --surface:     var(--paper);
  --fore:        var(--bone);
  --fore-2:      rgb(var(--bone-rgb) / 0.60);
  --rule:        rgb(var(--bone-rgb) / 0.28);
  --rule-2:      rgb(var(--bone-rgb) / 0.14);
  --accent:      var(--operator);
  --accent-fore: var(--bone);
  --cta-bg:      var(--bone);
  --cta-fore:    var(--ink);
}

/* ── dark grounds: bone foreground ───────────────────────────────────── */
[data-theme="ink"] {
  --ground:   var(--ink);
  --surface:  var(--paper);
  --fore:     var(--bone);
  --fore-2:   rgb(var(--bone-rgb) / 0.60);
  --rule:     rgb(var(--bone-rgb) / 0.28);
  --rule-2:   rgb(var(--bone-rgb) / 0.14);
  --cta-bg:   var(--bone);
  --cta-fore: var(--ink);
}

[data-theme="cobalt"] {
  --ground:   var(--cobalt);
  --surface:  var(--bone);
  --fore:     var(--bone);
  --fore-2:   rgb(var(--bone-rgb) / 0.72);
  --rule:     rgb(var(--bone-rgb) / 0.36);
  --rule-2:   rgb(var(--bone-rgb) / 0.18);
  --cta-bg:   var(--bone);
  --cta-fore: var(--ink);
}

[data-theme="moss"] {
  --ground:   var(--moss);
  --surface:  var(--bone);
  --fore:     var(--bone);
  --fore-2:   rgb(var(--bone-rgb) / 0.78);
  --rule:     rgb(var(--bone-rgb) / 0.40);
  --rule-2:   rgb(var(--bone-rgb) / 0.18);
  --cta-bg:   var(--bone);
  --cta-fore: var(--ink);
}

[data-theme="rose"] {
  --ground:   var(--rose);
  --surface:  var(--bone);
  --fore:     var(--bone);
  --fore-2:   rgb(var(--bone-rgb) / 0.78);
  --rule:     rgb(var(--bone-rgb) / 0.40);
  --rule-2:   rgb(var(--bone-rgb) / 0.18);
  --cta-bg:   var(--bone);
  --cta-fore: var(--ink);
}

/* ── light grounds: ink foreground ───────────────────────────────────── */
[data-theme="sand"] {
  --ground:   var(--sand);
  --surface:  var(--bone);
  --fore:     var(--ink);
  --fore-2:   var(--ink-2);
  --rule:     rgb(var(--ink-rgb) / 0.18);
  --rule-2:   rgb(var(--ink-rgb) / 0.08);
  --cta-bg:   var(--ink);
  --cta-fore: var(--bone);
}

[data-theme="bone"] {
  --ground:   var(--bone);
  --surface:  var(--paper);
  --fore:     var(--ink);
  --fore-2:   var(--ink-2);
  --rule:     rgb(var(--ink-rgb) / 0.16);
  --rule-2:   rgb(var(--ink-rgb) / 0.07);
  --cta-bg:   var(--ink);
  --cta-fore: var(--bone);
}