/* Shared site tokens. Inlined before style.css by the renderer. */
:root {
  /* ---- Warm Pine design system (design_handoff_blog_system) ---- */
  /* Surfaces & ink */
  --paper: #FAF9F4;
  --card: #FFFFFF;
  --sunken: #F1EEE5;
  --hairline: #E7E3D9;
  --field-border: #D9D4C9;
  --row-divider: #F0ECE3;
  --ink: #1B1A17;
  --body-ink: #3A3833;
  --muted: #6C685C;
  --faint: #A9A496;
  /* Brand green */
  --pine: #1C5D4D;
  --pine-deep: #16493D;
  --pine-press: #103A30;
  --mint: #E1ECE5;
  --mint-border: #C2D6CC;
  /* Links & data */
  --link: #2F6BD6;
  --link-hover: #1E4FA8;
  --link-press: #163E78;
  --gold: #B7872B;
  --up: #2F7D5B;
  --down: #BE463B;

  /* ---- Legacy aliases — repointed so existing rules & tool posts inherit
     the Warm Pine palette without per-file edits. ---- */
  --bg: var(--paper);
  --bg-strong: var(--sunken);
  --surface: var(--card);
  --surface-strong: var(--card);
  --surface-ink: var(--ink);
  --text: var(--ink);
  --text-secondary: var(--muted);
  --border: var(--hairline);
  --accent: var(--pine);
  --accent-hover: var(--pine-deep);
  --accent-soft: rgba(28, 93, 77, 0.12);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.18);

  /* Chart role encoding (pine primary / blue benchmark / up-down / gold annotation) */
  --chart-primary: var(--pine);
  --chart-benchmark: var(--link);
  --chart-up: var(--up);
  --chart-down: var(--down);
  --chart-annotation: var(--gold);
  --line-raw: #8B8779;
  --line-raw-fill: rgba(139, 135, 121, 0.10);
  --line-filtered: var(--pine);
  --line-filtered-fill: rgba(28, 93, 77, 0.12);
  --chart-bg: var(--card);

  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --max-width: 960px;
  --article-width: 920px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-card: 14px;
}

/* Dark values are deliberately attached to html[data-theme], which gives them
   enough specificity to also theme interactive posts that declare light
   defaults in a later, post-local :root block. */
/* Dark roles follow GitHub Primer's default dark scale; chart roles preserve
   financial semantics rather than reusing the interface accent. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D1117;
  --card: #161B22;
  --sunken: #21262D;
  --hairline: #30363D;
  --field-border: #484F58;
  --row-divider: #262C36;
  --ink: #F0F6FC;
  --body-ink: #C9D1D9;
  --muted: #8B949E;
  --faint: #6E7681;
  --pine: #58A6FF;
  --pine-deep: #79C0FF;
  --pine-press: #A5D6FF;
  --mint: #1B3428;
  --mint-border: #2EA043;
  --link: #79C0FF;
  --link-hover: #A5D6FF;
  --link-press: #CAEAFF;
  --gold: #D29922;
  --up: #3FB950;
  --down: #F85149;
  --accent-soft: rgba(88, 166, 255, 0.15);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  --line-raw: #8B949E;
  --line-raw-fill: rgba(139, 148, 158, 0.12);
  --line-filtered-fill: rgba(88, 166, 255, 0.15);
  --bg-canvas: var(--paper);
  --bg-panel: var(--card);
  --bg-input: var(--sunken);
  --bg-input-focus: #263241;
  --text-primary: var(--ink);
  --text-muted: var(--faint);
  --border-focus: rgba(88, 166, 255, 0.48);
  --chart-primary: #3FB950;
  --chart-benchmark: #58A6FF;
  --chart-up: #3FB950;
  --chart-down: #F85149;
  --chart-annotation: #D29922;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --paper: #0D1117;
    --card: #161B22;
    --sunken: #21262D;
    --hairline: #30363D;
    --field-border: #484F58;
    --row-divider: #262C36;
    --ink: #F0F6FC;
    --body-ink: #C9D1D9;
    --muted: #8B949E;
    --faint: #6E7681;
    --pine: #58A6FF;
    --pine-deep: #79C0FF;
    --pine-press: #A5D6FF;
    --mint: #1B3428;
    --mint-border: #2EA043;
    --link: #79C0FF;
    --link-hover: #A5D6FF;
    --link-press: #CAEAFF;
    --gold: #D29922;
    --up: #3FB950;
    --down: #F85149;
    --accent-soft: rgba(88, 166, 255, 0.15);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    --line-raw: #8B949E;
    --line-raw-fill: rgba(139, 148, 158, 0.12);
    --line-filtered-fill: rgba(88, 166, 255, 0.15);
    --bg-canvas: var(--paper);
    --bg-panel: var(--card);
    --bg-input: var(--sunken);
    --bg-input-focus: #263241;
    --text-primary: var(--ink);
    --text-muted: var(--faint);
    --border-focus: rgba(88, 166, 255, 0.48);
  --chart-primary: #3FB950;
  --chart-benchmark: #58A6FF;
  --chart-up: #3FB950;
  --chart-down: #F85149;
  --chart-annotation: #D29922;
  }
}