/* ==========================================================================
   jchimp.tech — "Lab Bench" theme · v3 (Blueprint Bench)
   Source of truth for all jchimp.tech digital surfaces.
   Raw palette (RGB channels) → semantic layer → components read ONLY
   semantic tokens. Light default; dark via [data-theme="dark"] (any
   ancestor) or prefers-color-scheme.
   Accent logic: fern acts · plum names · brass warns · blue links ·
   red means danger. Chartreuse #97C459 is the logo color; it appears in code
   only on the dark tile (strings, prompts) and never acts in UI.
   Code blocks follow the page mode — light on the surface, dark on the tile.
   Sibling brand: ChampionOps (championops-theme.css) — same semantic names.
   ========================================================================== */

:root, [data-theme="light"] {
  /* ---------- raw palette · light "Paper" ---------- */
  --jc-ground:     249 249 249;  /* #F9F9F9 page ground        */
  --jc-plate:      253 253 253;  /* #FDFDFD cards, chips       */
  --jc-rule:       214 214 211;  /* #D6D6D3 hairlines, borders */
  --jc-dim:        108 111 113;  /* #6C6F71 secondary text     */
  --jc-ink:         28  30  31;  /* #1C1E1F primary text       */
  --jc-green:       85 140  64;  /* #558C40 fern — acts        */
  --jc-green-deep:  63 107  46;  /* #3F6B2E hover / ink-size   */
  --jc-plum:       109  81 155;  /* #6D519B names              */
  --jc-brass:      169 127  28;  /* #A97F1C warns              */
  --jc-link:        47 110 147;  /* #2F6E93 prose links        */
  --jc-danger:     187  70  50;  /* #BB4632 errors only        */

  /* ---------- washes (tinted panel backgrounds, one per hue) ---------- */
  --jc-wash-green: #E7EFDE;
  --jc-wash-plum:  #EDE8F4;
  --jc-wash-brass: #F2ECDA;
  --jc-wash-blue:  #E4EDF2;
  --jc-wash-danger:#F5E2DC;

  --jc-row-alt:    #F2F2F1;      /* table zebra bar            */

  /* ---------- code tile · light (sits on the surface) ---------- */
  --jc-code-bg:       #FDFDFD;   /* surface — code follows the page mode */
  --jc-code-text:     #1C1E1F;   /* ink */
  --jc-code-dim:      #6C6F71;   /* comments (italic) */
  --jc-code-kw:       #3F6B2E;   /* keywords — deep fern, semibold */
  --jc-code-str:      #3F6B2E;   /* strings — deep fern */
  --jc-code-flag:     #A97F1C;   /* flags/attrs — brass */
  --jc-code-num:      #2F6E93;   /* numbers — steel */
}

[data-theme="dark"] {
  /* ---------- raw palette · dark "Icon Tile" (#20232A everywhere) ---------- */
  --jc-ground:      32  35  42;  /* #20232A — the icon's own tile */
  --jc-plate:       43  47  56;  /* #2B2F38                    */
  --jc-rule:        58  62  72;  /* #3A3E48                    */
  --jc-dim:        150 154 163;  /* #969AA3                    */
  --jc-ink:        232 233 236;  /* #E8E9EC                    */
  --jc-green:      130 181 106;  /* #82B56A fern lifted        */
  --jc-green-deep: 164 205 143;  /* #A4CD8F hover / text-size  */
  --jc-plum:       169 143 199;  /* #A98FC7                    */
  --jc-brass:      217 174  78;  /* #D9AE4E                    */
  --jc-link:       133 180 206;  /* #85B4CE                    */
  --jc-danger:     224 122  99;  /* #E07A63                    */

  --jc-wash-green: #262E22;
  --jc-wash-plum:  #2B2635;
  --jc-wash-brass: #2F2820;
  --jc-wash-blue:  #222B34;
  --jc-wash-danger:#342420;

  --jc-row-alt:    #262A32;

  /* ---------- code tile · dark (the icon's own tile) ---------- */
  --jc-code-bg:       #20232A;   /* seamless with the dark ground */
  --jc-code-text:     #D6D8DC;
  --jc-code-dim:      #8B909A;   /* comments (italic) */
  --jc-code-kw:       #A4CD8F;   /* keywords — fern, lifted */
  --jc-code-str:      #97C459;   /* strings — chartreuse */
  --jc-code-flag:     #D9AE4E;   /* flags/attrs — amber */
  --jc-code-num:      #6AA6E0;   /* numbers — steel */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jc-ground: 32 35 42; --jc-plate: 43 47 56; --jc-rule: 58 62 72;
    --jc-dim: 150 154 163; --jc-ink: 232 233 236;
    --jc-green: 130 181 106; --jc-green-deep: 164 205 143;
    --jc-plum: 169 143 199; --jc-brass: 217 174 78;
    --jc-link: 133 180 206; --jc-danger: 224 122 99;
    --jc-wash-green: #262E22; --jc-wash-plum: #2B2635;
    --jc-wash-brass: #2F2820; --jc-wash-blue: #222B34;
    --jc-wash-danger: #342420;
    --jc-row-alt: #262A32;
    --jc-code-bg: #20232A; --jc-code-text: #D6D8DC; --jc-code-dim: #8B909A;
    --jc-code-kw: #A4CD8F; --jc-code-str: #97C459; --jc-code-flag: #D9AE4E;
    --jc-code-num: #6AA6E0;
  }
}

:root, [data-theme="light"], [data-theme="dark"] {
  /* ---------- semantic layer (components use these) ---------- */
  --jc-bg:            rgb(var(--jc-ground));
  --jc-surface:       rgb(var(--jc-plate));
  --jc-border:        rgb(var(--jc-rule));
  --jc-text:          rgb(var(--jc-ink));
  --jc-text-dim:      rgb(var(--jc-dim));
  --jc-accent:        rgb(var(--jc-green));
  --jc-accent-hover:  rgb(var(--jc-green-deep));
  --jc-accent-ink:    rgb(var(--jc-green-deep)); /* accent at text size */
  --jc-on-accent:     rgb(var(--jc-ground));
  --jc-term:          rgb(var(--jc-plum));
  --jc-term-bg:       var(--jc-wash-plum);
  --jc-warn:          rgb(var(--jc-brass));
  --jc-warn-bg:       var(--jc-wash-brass);
  --jc-ok:            rgb(var(--jc-green-deep)); /* fern doubles as OK */
  --jc-ok-bg:         var(--jc-wash-green);
  --jc-error:         rgb(var(--jc-danger));
  --jc-error-bg:      var(--jc-wash-danger);
  --jc-link-color:    rgb(var(--jc-link));
  --jc-link-bg:       var(--jc-wash-blue);

  /* ---------- brand constant (code tokens are mode-specific, see above) --- */
  --jc-logo:          #97C459;   /* chartreuse: logo glyph, dark code strings/prompts */

  /* ---------- type ---------- */
  --jc-font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --jc-font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --jc-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --jc-tracking-label: 0.14em;
  --jc-tracking-display: -0.02em;

  /* ---------- shape & space ---------- */
  --jc-radius: 0;                /* blueprint: square everywhere */
  --jc-radius-sm: 0;
  --jc-rule-heavy: 3px solid rgb(var(--jc-ink)); /* masthead, thead, footer ONLY */
  --jc-space: 8px;
}

/* ==========================================================================
   Base element opinions — plain HTML / rendered Markdown lands on-brand
   with zero classes.
   ========================================================================== */

body {
  background: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-body);
  line-height: 1.6;
}

h1, h2 {
  font-family: var(--jc-font-display);
  font-weight: 700;
  letter-spacing: var(--jc-tracking-display);
  /* text-transform: uppercase;   /* uppercase stops at H2 */ */
  color: var(--jc-text);
  line-height: 1.0;
}
h3 { font-weight: 600; letter-spacing: -0.015em; }
h4 {
  font-family: var(--jc-font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--jc-tracking-label);
  text-transform: uppercase;
  color: var(--jc-text-dim);
}

a { color: var(--jc-link-color); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--jc-text); }

strong.term, .term { color: var(--jc-term); font-weight: 600; }

/* --- code: inline stays on surface; blocks follow the page mode (light on
   the surface, dark on the icon tile) via the mode-specific code tokens --- */
code, kbd, pre { font-family: var(--jc-font-mono); }
:not(pre) > code {
  font-size: 0.88em;
  background: var(--jc-surface);
  border: 1px solid var(--jc-border);
  padding: 0.1em 0.35em;
}
pre {
  background: var(--jc-code-bg);
  color: var(--jc-code-text);
  border: 1px solid var(--jc-border);
  padding: 14px 16px;
  font-size: 0.8rem;
  line-height: 1.8;
  overflow-x: auto;
}
pre .tok-cm   { color: var(--jc-code-dim); font-style: italic; }
pre .tok-kw   { color: var(--jc-code-kw); font-weight: 600; }
pre .tok-str  { color: var(--jc-code-str); }
pre .tok-flag { color: var(--jc-code-flag); }
pre .tok-num  { color: var(--jc-code-num); }
pre .tok-prompt { color: var(--jc-code-str); font-weight: 600; }

hr { border: none; border-top: 1px solid var(--jc-border); }
hr.heavy { border-top: var(--jc-rule-heavy); }
hr.accent { border: none; height: 3px; width: 64px; background: var(--jc-accent); }

blockquote {
  border-left: 3px solid var(--jc-warn);
  background: var(--jc-warn-bg);
  padding: 11px 15px;
}

/* --- blueprint frame ---
   Wrap a card, figure, code block or spec plate:
   <div class="bp"><i class="corner tl"></i><i class="corner tr"></i>
   <i class="corner bl"></i><i class="corner br"></i> … </div>            */
.bp { position: relative; border: 1px solid var(--jc-border); }
.bp > .corner { position: absolute; width: 11px; height: 11px; color: var(--jc-accent); }
.bp > .corner.tl { top: -6px; left: -6px; }
.bp > .corner.tr { top: -6px; right: -6px; }
.bp > .corner.bl { bottom: -6px; left: -6px; }
.bp > .corner.br { bottom: -6px; right: -6px; }

/* --- wash panels: callouts in any hue --- */
.wash {
  border: 1px solid var(--jc-border);
  border-left-width: 3px;
  padding: 11px 15px;
}
.wash-green  { background: var(--jc-wash-green);  border-left-color: var(--jc-accent); }
.wash-plum   { background: var(--jc-wash-plum);   border-left-color: var(--jc-term); }
.wash-brass  { background: var(--jc-wash-brass);  border-left-color: var(--jc-warn); }
.wash-blue   { background: var(--jc-wash-blue);   border-left-color: var(--jc-link-color); }
.wash-danger { background: var(--jc-wash-danger); border-left-color: var(--jc-error); }

/* --- tables: thin border, mono-caps head over heavy rule, zebra bars --- */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  border: 1px solid var(--jc-border);
  background: var(--jc-surface);
}
thead th {
  font-family: var(--jc-font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: var(--jc-tracking-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--jc-text-dim);
  border-bottom: 2px solid var(--jc-text);
  padding: 8px 12px;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--jc-border); }
tbody tr:nth-child(2n) { background: var(--jc-row-alt); }
tbody tr:last-child td { border-bottom: none; }
td.num { font-family: var(--jc-font-mono); text-align: right; }
/* Still no vertical rules between columns — alignment separates. */

button, .btn {
  font-family: var(--jc-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--jc-accent);
  color: var(--jc-on-accent);
  border: 1px solid var(--jc-accent-hover);
  padding: 9px 16px;
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--jc-accent-hover); }
.btn-ghost {
  background: transparent;
  color: var(--jc-accent-ink);
  border: 1px solid var(--jc-border);
}
.btn-ghost:hover { border-color: var(--jc-accent); background: transparent; }
:focus-visible { outline: 2px solid var(--jc-accent); outline-offset: 2px; }

.kicker {
  font-family: var(--jc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--jc-tracking-label);
  text-transform: uppercase;
  color: var(--jc-accent-ink);
}
.badge {
  font-family: var(--jc-font-mono);
  font-size: 0.66rem;
  padding: 2px 8px;
  border: 1px solid transparent;
}
.badge-ok    { background: var(--jc-ok-bg);    color: var(--jc-ok); }
.badge-term  { background: var(--jc-term-bg);  color: var(--jc-term); }
.badge-warn  { background: var(--jc-warn-bg);  color: var(--jc-warn); }
.badge-error { background: var(--jc-error-bg); color: var(--jc-error); }
.chip {
  font-family: var(--jc-font-mono);
  font-size: 0.7rem;
  padding: 2px 9px;
  border: 1px solid var(--jc-border);
  color: var(--jc-text-dim);
}