/* ============================================================
   ysb.life — shared design-system tokens (light + dark)
   Light mode = the existing parchment identity (unchanged values).
   Dark mode  = a warm near-black reading theme, applied via
   [data-theme="dark"] overriding the same variable names.
   ============================================================ */

:root {
  /* ---- Brand palette (light / parchment) ---- */
  --bg:          #f4efe6;
  --paper:       #faf6ed;
  --ink:         #1a1611;
  --ink-soft:    #5a544a;
  --rule:        #d8d0c0;
  --rule-soft:   #e6dfd1;
  --accent:      #c1442e;
  --accent-soft: #f3d9d1;
  --highlight:   #ffe9a8;
  --time-bg:     #1a1611;
  --time-fg:     #ffd166;

  /* ---- Derived surfaces used by transcript/studio UI ---- */
  --panel:       var(--paper);   /* raised card surface            */
  --panel-2:     #f0e9db;        /* slightly recessed surface      */
  --chip-bg:     var(--highlight);
  --chip-border: #b58900;
  --mark-bg:     #ffe9a8;        /* search highlight               */
  --mark-fg:     #1a1611;
  --shadow:      rgba(26,22,17,0.14);
  --focus:       var(--accent);

  /* ---- Fonts ---- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  color-scheme: light;
}

/* ============================================================
   DARK — warm near-black. Deliberate, calm, "reading app".
   Only the color tokens are remapped; nothing structural.
   ============================================================ */
:root[data-theme="dark"] {
  --bg:          #17140f;  /* warm ink-brown ground   */
  --paper:       #211d16;  /* panel / card            */
  --ink:         #efe7d8;  /* soft cream text         */
  --ink-soft:    #b3a892;
  --rule:        #3a342a;
  --rule-soft:   #2c271f;
  --accent:      #e0623f;  /* warmed terracotta, brighter for dark */
  --accent-soft: #3a271f;
  --highlight:   #4a3d1a;
  --time-bg:     #efe7d8;
  --time-fg:     #ffd166;

  --panel:       #211d16;
  --panel-2:     #1c1913;
  --chip-bg:     #33291a;
  --chip-border: #6b5726;
  --mark-bg:     #6e5a1f;
  --mark-fg:     #fdf6e6;
  --shadow:      rgba(0,0,0,0.5);
  --focus:       var(--accent);

  color-scheme: dark;
}

/* ============================================================
   Small shared primitives (top bar + theme toggle).
   Pages may use these or their own; kept lightweight & scoped.
   ============================================================ */
.ysb-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.ysb-brand {
  font-family: var(--font-serif); font-weight: 600; font-style: italic;
  font-size: 20px; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1; text-decoration: none;
}
.ysb-brand .dot { color: var(--accent); font-style: normal; }
.ysb-navlinks { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.ysb-navlink {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft); text-decoration: none;
  padding: 6px 10px; border-radius: 3px; transition: color .12s, background .12s;
}
.ysb-navlink:hover { color: var(--accent); background: var(--rule-soft); }
.ysb-navlink[aria-current="page"] { color: var(--ink); }

/* Sun/moon toggle button */
.ysb-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  cursor: pointer; padding: 0; line-height: 0;
  transition: background .12s, color .12s, box-shadow .12s;
}
.ysb-theme-toggle:hover { background: var(--accent); color: var(--paper); }
.ysb-theme-toggle svg { width: 16px; height: 16px; display: block; }
/* show the correct glyph per theme */
.ysb-theme-toggle .icon-moon { display: none; }
.ysb-theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .ysb-theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .ysb-theme-toggle .icon-sun  { display: none; }

/* Accessible, visible keyboard focus everywhere */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}