/* Skin C · Reference — light editorial docs site: serif reading text, quiet
   chrome, orange used sparingly, on-this-page rail. */

:root[data-skin="reference"] {
  --bg: #ffffff;
  --surface: #f7f6f3;
  --text: #2b2f33;
  --lede: #464b51;
  --muted: #6b7178;
  --heading: #111a22;
  --accent: #d94118;
  --accent-deep: #b8360f;
  --cream: #fbf3dc;
  --ui: #111a22;
  --nav-bg: #f7f6f3;
  --nav-text: #3b4046;
  --nav-muted: #8a9097;
  --top-bg: #ffffff;
  --top-text: #111a22;
  --top-border: #e6e3dd;
  --popup-bg: #ffffff;
  --rule: #e6e3dd;
  --code-bg: #f1efea;
  --code-text: #7a2a10;
  --note-bg: #fbf3dc;
  --note-border: #efdca5;
  --kbd-bg: #ffffff;
  --kbd-text: #2b2f33;
  --kbd-border: #cfcbc3;
  --font: "Charter", "Iowan Old Style", Georgia, serif;
  --font-head: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 8px;
}

:root[data-skin="reference"][data-mode="dark"] {
  --bg: #16181b;
  --surface: #1d2024;
  --text: #d8d5cf;
  --lede: #c4c1bb;
  --muted: #979ca3;
  --heading: #f3efe7;
  --accent: #ff7a45;
  --accent-deep: #ff8f60;
  --ui: #f3efe7;
  --nav-bg: #1b1e21;
  --nav-text: #c4c1bb;
  --nav-muted: #7d828a;
  --top-bg: #16181b;
  --top-text: #f3efe7;
  --top-border: #2c3035;
  --popup-bg: #1d2024;
  --rule: #2c3035;
  --code-bg: #26292e;
  --code-text: #ffc9a8;
  --note-bg: rgba(255, 122, 69, .08);
  --note-border: rgba(255, 122, 69, .28);
  --warn: #ff6b6b;
  --warn-bg: rgba(255, 107, 107, .08);
  --kbd-bg: #26292e;
  --kbd-text: #e6e2da;
  --kbd-border: #45494f;
}

:root[data-skin="reference"] .top { border-bottom: 1px solid var(--rule); }
:root[data-skin="reference"] .top .bolt { width: 30px; height: 19px; }
:root[data-skin="reference"] .search { background: var(--surface); }
:root[data-skin="reference"] .sidenav { border-right: 1px solid var(--rule); }
:root[data-skin="reference"] .sidenav > a { border-left: 0; border-radius: 6px; }
:root[data-skin="reference"] .sidenav > a.active { background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--rule); }
:root[data-skin="reference"] .sidenav > a span { color: var(--nav-muted); font-weight: 600; }
:root[data-skin="reference"] .sidenav > a.active span { color: var(--accent); }
:root[data-skin="reference"] .crumbs { color: var(--muted); letter-spacing: .06em; text-transform: none; font-weight: 500; font-size: 13px; }
:root[data-skin="reference"] .crumbs b { color: var(--accent); }
:root[data-skin="reference"] .doc h1 { font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
:root[data-skin="reference"] .doc .lede { font-size: 1.28rem; }
:root[data-skin="reference"] .doc h2 { font-weight: 700; letter-spacing: -.015em; font-size: 1.6rem; }
:root[data-skin="reference"] .doc p, :root[data-skin="reference"] .doc li { font-size: 1.1rem; line-height: 1.72; }
:root[data-skin="reference"] .doc .lede { font-size: 1.28rem; }
:root[data-skin="reference"] figure img { border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(17, 26, 34, .08); }
:root[data-skin="reference"] .flow .n { font-weight: 600; background: var(--bg); }
:root[data-skin="reference"] .note { border-left: 0; border-radius: var(--radius); border: 1px solid var(--note-border); }
:root[data-skin="reference"] .note-warning, :root[data-skin="reference"] .note-caution { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
:root[data-skin="reference"] table { border: 1px solid var(--rule); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
:root[data-skin="reference"] th { background: var(--surface); }
:root[data-skin="reference"] tr:last-child td { border-bottom: 0; }