/* Hallmark · design-system: design.md · designed-as-app
 * theme: "scholarly almanac" (warm paper · oxblood accent · Fraunces display)
 * genre: editorial · axes: light / high-contrast-serif / warm(30) · dark variant included
 * pre-emit critique: P5 H4 E4 S4 R5 V4
 * Shared tokens + site chrome for every Workbench page. Pages alias their local
 * variable names onto --wb-* so per-page CSS stays untouched. */

:root{
  /* paper & ink */
  --wb-paper: oklch(96.5% 0.011 85);
  --wb-surface: oklch(99% 0.006 90);
  --wb-surface-2: oklch(93.5% 0.014 85);
  --wb-ink: oklch(22% 0.015 60);
  --wb-text: oklch(34% 0.015 65);
  --wb-muted: oklch(47% 0.014 70);
  --wb-faint: oklch(60% 0.013 75);
  --wb-line: oklch(86% 0.013 85);
  --wb-line-soft: oklch(90.5% 0.011 85);

  /* accent — oxblood */
  --wb-accent: oklch(46% 0.140 30);
  --wb-accent-2: oklch(40% 0.125 27);
  --wb-accent-soft: oklch(91% 0.035 30);

  /* functional hues */
  --wb-good: oklch(46% 0.100 155);
  --wb-good-soft: oklch(92% 0.040 152);
  --wb-blue: oklch(45% 0.100 245);
  --wb-blue-soft: oklch(92% 0.032 245);
  --wb-warn: oklch(52% 0.110 70);
  --wb-warn-soft: oklch(93% 0.050 85);
  --wb-bad: oklch(50% 0.150 22);
  --wb-bad-soft: oklch(92% 0.045 22);

  /* dark document covers (dark in BOTH modes — cover-accent must read on it) */
  --wb-cover: oklch(24% 0.022 50);
  --wb-cover-ink: oklch(96% 0.010 85);
  --wb-cover-mut: oklch(74% 0.018 75);
  --wb-cover-accent: oklch(72% 0.115 45);

  /* type */
  --wb-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --wb-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wb-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* motion */
  --wb-ease: cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --wb-paper: oklch(17.5% 0.010 60);
    --wb-surface: oklch(21% 0.012 65);
    --wb-surface-2: oklch(24.5% 0.013 68);
    --wb-ink: oklch(93.5% 0.012 85);
    --wb-text: oklch(81% 0.013 82);
    --wb-muted: oklch(66% 0.013 78);
    --wb-faint: oklch(54% 0.012 75);
    --wb-line: oklch(32% 0.013 68);
    --wb-line-soft: oklch(27% 0.011 65);
    --wb-accent: oklch(68% 0.125 33);
    --wb-accent-2: oklch(74% 0.115 36);
    --wb-accent-soft: oklch(30% 0.055 30);
    --wb-good: oklch(70% 0.100 155);
    --wb-good-soft: oklch(27% 0.050 152);
    --wb-blue: oklch(72% 0.090 245);
    --wb-blue-soft: oklch(28% 0.048 245);
    --wb-warn: oklch(76% 0.105 80);
    --wb-warn-soft: oklch(30% 0.055 80);
    --wb-bad: oklch(70% 0.130 25);
    --wb-bad-soft: oklch(28% 0.058 22);
    --wb-cover: oklch(14.5% 0.012 55);
    --wb-cover-ink: oklch(95% 0.010 85);
    --wb-cover-mut: oklch(71% 0.016 75);
    --wb-cover-accent: oklch(74% 0.110 48);
  }
}

:root[data-theme="light"]{
  --wb-paper: oklch(96.5% 0.011 85);
  --wb-surface: oklch(99% 0.006 90);
  --wb-surface-2: oklch(93.5% 0.014 85);
  --wb-ink: oklch(22% 0.015 60);
  --wb-text: oklch(34% 0.015 65);
  --wb-muted: oklch(47% 0.014 70);
  --wb-faint: oklch(60% 0.013 75);
  --wb-line: oklch(86% 0.013 85);
  --wb-line-soft: oklch(90.5% 0.011 85);
  --wb-accent: oklch(46% 0.140 30);
  --wb-accent-2: oklch(40% 0.125 27);
  --wb-accent-soft: oklch(91% 0.035 30);
  --wb-good: oklch(46% 0.100 155);
  --wb-good-soft: oklch(92% 0.040 152);
  --wb-blue: oklch(45% 0.100 245);
  --wb-blue-soft: oklch(92% 0.032 245);
  --wb-warn: oklch(52% 0.110 70);
  --wb-warn-soft: oklch(93% 0.050 85);
  --wb-bad: oklch(50% 0.150 22);
  --wb-bad-soft: oklch(92% 0.045 22);
  --wb-cover: oklch(24% 0.022 50);
  --wb-cover-ink: oklch(96% 0.010 85);
  --wb-cover-mut: oklch(74% 0.018 75);
  --wb-cover-accent: oklch(72% 0.115 45);
}

:root[data-theme="dark"]{
  --wb-paper: oklch(17.5% 0.010 60);
  --wb-surface: oklch(21% 0.012 65);
  --wb-surface-2: oklch(24.5% 0.013 68);
  --wb-ink: oklch(93.5% 0.012 85);
  --wb-text: oklch(81% 0.013 82);
  --wb-muted: oklch(66% 0.013 78);
  --wb-faint: oklch(54% 0.012 75);
  --wb-line: oklch(32% 0.013 68);
  --wb-line-soft: oklch(27% 0.011 65);
  --wb-accent: oklch(68% 0.125 33);
  --wb-accent-2: oklch(74% 0.115 36);
  --wb-accent-soft: oklch(30% 0.055 30);
  --wb-good: oklch(70% 0.100 155);
  --wb-good-soft: oklch(27% 0.050 152);
  --wb-blue: oklch(72% 0.090 245);
  --wb-blue-soft: oklch(28% 0.048 245);
  --wb-warn: oklch(76% 0.105 80);
  --wb-warn-soft: oklch(30% 0.055 80);
  --wb-bad: oklch(70% 0.130 25);
  --wb-bad-soft: oklch(28% 0.058 22);
  --wb-cover: oklch(14.5% 0.012 55);
  --wb-cover-ink: oklch(95% 0.010 85);
  --wb-cover-mut: oklch(71% 0.016 75);
  --wb-cover-accent: oklch(74% 0.110 48);
}

/* ---------- shared site chrome ---------- */

/* anchor jumps must clear the sticky bar; no horizontal scroll, ever */
html{ scroll-padding-top: 3.6rem; }
html, body{ overflow-x: clip; }

.wb-bar{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem clamp(1rem, 3vw, 1.6rem);
  background: color-mix(in oklch, var(--wb-paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wb-line-soft);
  font-family: var(--wb-sans);
}
.wb-bar__mark{
  font-family: var(--wb-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wb-ink); text-decoration: none; border-bottom: none;
  white-space: nowrap;
}
.wb-bar__mark b{ color: var(--wb-accent); }
.wb-bar__links{
  display: flex; align-items: center; gap: clamp(.55rem, 2vw, 1.2rem);
  font-size: 13px; font-weight: 500;
}
.wb-bar__links a{
  color: var(--wb-muted); text-decoration: none;
  border-bottom: 1.5px solid transparent; padding: .2rem 0;
  transition: color .15s var(--wb-ease), border-color .15s var(--wb-ease);
  white-space: nowrap;
}
.wb-bar__links a:hover{ color: var(--wb-ink); border-bottom-color: var(--wb-accent); }
.wb-bar__links a[aria-current="page"]{ color: var(--wb-ink); border-bottom-color: var(--wb-accent); }

.wb-toggle{
  font-family: var(--wb-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wb-muted); background: var(--wb-surface);
  border: 1px solid var(--wb-line); border-radius: 999px;
  padding: .32rem .8rem; cursor: pointer;
  transition: color .15s var(--wb-ease), border-color .15s var(--wb-ease), transform .12s var(--wb-ease);
}
.wb-toggle:hover{ color: var(--wb-ink); border-color: var(--wb-accent); }
.wb-toggle:active{ transform: translateY(1px); }
.wb-toggle:focus-visible{ outline: 2px solid var(--wb-accent); outline-offset: 2px; }

@media (max-width: 560px){
  .wb-bar{ gap: .6rem; }
  .wb-bar__mark{ font-size: 11px; letter-spacing: .08em; }
  .wb-bar__links{ font-size: 12.5px; gap: .55rem; }
  .wb-toggle{ padding: .28rem .6rem; }
}