/* ============================================================
   Cambridge CS Notes — Design System
   Treatment: Academic documentation / reference library
   Palette: warm paper, ink, Cambridge blue + oak accent
   Type: Crimson Pro (display serif) / Atkinson Hyperlegible Next (UI+body) / JetBrains Mono (labels, code)
   ============================================================ */

:root {
  /* Neutrals — paper & ink (not pure grey) */
  --paper:        #F6F3EC;
  --paper-2:      #EFEBE1;
  --surface:      #FCFAF5;
  --surface-2:    #F2EEE4;
  --ink:          #1C2230;
  --ink-2:        #4A5161;
  --ink-3:        #757C8C;
  --line:         #DED8C9;
  --line-strong:  #C9C2B0;

  /* Accents */
  --cambridge:    #1A4D8F;   /* deep Cambridge blue */
  --cambridge-soft: #2E6BB3;
  --oak:          #9A6A2F;   /* oak/tan — category accents */
  --oak-soft:     #C08A3E;
  --crimson:      #8C2A3B;   /* scholarly crimson, used sparingly */
  --success:      #2F6B4F;
  --warn:         #9A6A2F;

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-faint:     var(--ink-3);
  --card:         var(--surface);
  --card-2:       var(--surface-2);
  --border:       var(--line);
  --border-strong:var(--line-strong);
  --accent:       var(--cambridge);
  --accent-soft:  var(--cambridge-soft);
  --ring:         var(--cambridge);

  --shadow-sm: 0 1px 2px rgba(28,34,48,.06), 0 1px 3px rgba(28,34,48,.05);
  --shadow-md: 0 4px 12px rgba(28,34,48,.07), 0 2px 4px rgba(28,34,48,.05);
  --shadow-lg: 0 18px 40px rgba(28,34,48,.12);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --fs-hero:  clamp(2.4rem, 5vw, 3.6rem);
  --fs-h1:    clamp(1.8rem, 3vw, 2.4rem);
  --fs-h2:    clamp(1.35rem, 2.2vw, 1.7rem);
  --fs-h3:    1.2rem;
  --fs-body:  1.0625rem;
  --fs-sm:    0.92rem;
  --fs-xs:    0.78rem;

  --maxw:     1180px;
  --sidebar-w: 296px;
  --topbar-h:  58px;

  --serif: "Crimson Pro", Georgia, serif;
  --sans:  "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    :root { }
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #15181F;
    --paper-2:      #1B1F28;
    --surface:      #1E232D;
    --surface-2:    #262C38;
    --ink:          #ECE7DA;
    --ink-2:        #B7BDC9;
    --ink-3:        #828A9A;
    --line:         #2E3440;
    --line-strong:  #3C4452;

    --cambridge:    #7FA8DC;
    --cambridge-soft: #5B86BE;
    --oak:          #D7A35C;
    --oak-soft:     #C08A3E;
    --crimson:      #D98A98;
    --success:      #6FB793;
    --warn:         #D7A35C;

    --bg:           var(--paper);
    --fg:           var(--ink);
    --fg-muted:     var(--ink-2);
    --fg-faint:     var(--ink-3);
    --card:         var(--surface);
    --card-2:       var(--surface-2);
    --border:       var(--line);
    --border-strong:var(--line-strong);
    --accent:       var(--cambridge);
    --accent-soft:  var(--cambridge-soft);
    --ring:         var(--cambridge);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 22px 50px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --paper:        #15181F;
  --paper-2:      #1B1F28;
  --surface:      #1E232D;
  --surface-2:    #262C38;
  --ink:          #ECE7DA;
  --ink-2:        #B7BDC9;
  --ink-3:        #828A9A;
  --line:         #2E3440;
  --line-strong:  #3C4452;

  --cambridge:    #7FA8DC;
  --cambridge-soft: #5B86BE;
  --oak:          #D7A35C;
  --oak-soft:     #C08A3E;
  --crimson:      #D98A98;
  --success:      #6FB793;
  --warn:         #D7A35C;

  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-faint:     var(--ink-3);
  --card:         var(--surface);
  --card-2:       var(--surface-2);
  --border:       var(--line);
  --border-strong:var(--line-strong);
  --accent:       var(--cambridge);
  --accent-soft:  var(--cambridge-soft);
  --ring:         var(--cambridge);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 50px rgba(0,0,0,.6);
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; color: var(--fg); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); margin: 0 0 .4em; }
h2 { font-size: var(--fs-h2); margin: 2em 0 .6em; }
h3 { font-size: var(--fs-h3); margin: 1.5em 0 .45em; font-family: var(--sans); font-weight: 700; letter-spacing: -0.005em; }
h4 { font-size: 1.02rem; margin: 1.2em 0 .35em; font-family: var(--sans); font-weight: 700; }
p { margin: 0 0 1.1em; max-width: 70ch; }
ul, ol { max-width: 70ch; padding-left: 1.3em; }
li { margin: .35em 0; }
code { font-family: var(--mono); font-size: .9em; background: var(--card-2); padding: .12em .4em; border-radius: 4px; border: 1px solid var(--border); }
pre { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1em 1.1em; overflow-x: auto; max-width: 100%; line-height: 1.55; }
pre code { background: none; border: none; padding: 0; font-size: .88rem; }
:focus-visible { outline: 2.5px solid var(--ring); outline-offset: 2px; border-radius: 3px; }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; }
.hidden { display: none !important; }

/* ---------------- Topbar ---------------- */
#topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
#brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
#brand:hover { text-decoration: none; }
.brand-mark {
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--cambridge); color: #fff; letter-spacing: -0.02em;
}
.brand-text { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; }
.topbar-spacer { flex: 1; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 10px;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--fg-muted); transition: background .18s, color .18s, border-color .18s;
}
.icon-btn:hover { background: var(--card-2); color: var(--fg); border-color: var(--border); }
.search-hint { font-size: var(--fs-sm); font-family: var(--sans); }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: inline; }
}

#progress-ring { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
#progress-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.ring-bg { stroke: var(--border-strong); }
.ring-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
#progress-pct { position: absolute; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--fg-muted); }

/* ---------------- Layout ---------------- */
#app-layout { display: flex; align-items: stretch; max-width: 100%; }
#sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--border);
  background: var(--paper-2);
}
.sidebar-inner { padding: 18px 12px 40px; }
#main { flex: 1; min-width: 0; }
#content { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(18px, 4vw, 56px) 120px; }

/* ---------------- Sidebar tree ---------------- */
.nav-part { margin-bottom: 6px; }
.nav-part > .nav-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding: 8px 8px 4px; cursor: default;
}
.nav-part > .nav-head .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nav-term { margin: 0 0 2px; }
.nav-term > .nav-term-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 8px; border-radius: 7px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--fg-muted);
}
.nav-course {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px 7px 22px; border-radius: 7px;
  font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: none;
  border-left: 2px solid transparent; transition: background .15s, color .15s;
  min-height: 44px; /* WCAG 2.5.5 touch target */
}
.nav-course:hover { background: var(--card-2); color: var(--fg); text-decoration: none; }
.nav-course.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.nav-course .check {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.nav-course.done .check { background: var(--success); border-color: var(--success); }
.nav-course.done .check svg { display: block; }
.nav-course .check svg { display: none; width: 10px; height: 10px; }
.nav-course .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Hero ---------------- */
.hero { padding: 24px 0 8px; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; line-height: 1.05; }
.hero-sub { font-size: 1.18rem; color: var(--fg-muted); max-width: 48ch; margin-top: -.2em; }
.hero-search { margin: 28px 0 22px; max-width: 560px; }
.hero-search input {
  width: 100%; height: 52px; padding: 0 18px; font-size: 1.05rem; font-family: var(--sans);
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s;
}
.hero-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hero-parts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.part-pill {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--fg);
  box-shadow: var(--shadow-sm); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.part-pill:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.pill-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); font-weight: 500; }

/* ---------------- Stats ---------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 40px 0 8px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 14px; }
.stat-num { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); margin-top: 8px; }

/* ---------------- Term grid (home) ---------------- */
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; margin-top: 36px; }
.term-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.term-card h3 { font-family: var(--mono); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.term-card .term-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 14px; }
.term-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.term-list a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--fg-muted); font-size: var(--fs-sm); transition: background .15s, color .15s;
}
.term-list a:hover { background: var(--card-2); color: var(--fg); text-decoration: none; }
.term-list .t-check { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; border: 1.5px solid var(--border-strong); }
.term-list a.done .t-check { background: var(--success); border-color: var(--success); }

/* ---------------- Course view ---------------- */
.course-head { border-bottom: 1px solid var(--border); padding-bottom: 22px; margin-bottom: 8px; }
.breadcrumb { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--fg-faint); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--fg-faint); }
.course-head h1 { font-size: var(--fs-h1); margin: 0 0 .25em; }
.course-tagline { font-size: 1.18rem; color: var(--fg-muted); max-width: 64ch; }
.course-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-faint); letter-spacing: .03em; }
.course-meta .m { display: inline-flex; gap: 7px; align-items: center; }
.course-meta .m b { color: var(--fg-muted); font-weight: 500; }

.done-btn {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 16px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--fg);
  font-size: var(--fs-sm); font-weight: 700; transition: background .16s, border-color .16s, color .16s;
}
.done-btn:hover { border-color: var(--success); color: var(--success); }
.done-btn.is-done { background: color-mix(in srgb, var(--success) 16%, var(--card)); border-color: var(--success); color: var(--success); }
.done-btn .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid currentColor; display: grid; place-items: center; }
.done-btn.is-done .box { background: currentColor; }
.done-btn .box svg { width: 11px; height: 11px; display: none; }
.done-btn.is-done .box svg { display: block; }
.done-btn.is-done .box { color: var(--card); }

.topic { scroll-margin-top: calc(var(--topbar-h) + 16px); padding-top: 6px; }
.topic-anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.topic-chip { font-family: var(--mono); font-size: var(--fs-xs); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--fg-muted); transition: border-color .15s, color .15s; }
.topic-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.callout { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.4em 0; }
.callout.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.callout.def { border-color: var(--oak); background: color-mix(in srgb, var(--oak) 8%, var(--card)); }
.callout .ct { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px; font-weight: 500; }
.callout.warn .ct { color: var(--oak); }
.callout.def .ct { color: var(--oak); }

.diagram { margin: 1.6em 0; padding: 20px; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.diagram svg { display: block; margin: 0 auto; height: auto; max-width: 100%; }
.diagram figcaption { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-faint); text-align: center; margin-top: 10px; letter-spacing: .03em; }

table.data { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--fs-sm); max-width: 100%; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
table.data th { font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); font-weight: 500; }
table.data tr:hover td { background: var(--card-2); }

.course-footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.course-footer a { font-family: var(--mono); font-size: var(--fs-sm); }

/* ---------------- Search overlay ---------------- */
#search-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,18,24,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
#search-overlay[aria-hidden="true"] { display: none; }
.search-panel { width: min(640px, 100%); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-box { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--fg-faint); }
.search-box input { flex: 1; border: none; background: none; color: var(--fg); font-size: 1.1rem; font-family: var(--sans); outline: none; }
.search-box kbd { font-family: var(--mono); font-size: .7rem; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--fg-faint); background: var(--card-2); }
#search-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.sr-section-label { font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); padding: 10px 12px 6px; }
.sr-item { display: block; padding: 11px 14px; border-radius: 9px; color: var(--fg); }
.sr-item:hover, .sr-item.sel { background: var(--card-2); text-decoration: none; }
.sr-item .sr-title { font-weight: 700; font-size: var(--fs-sm); }
.sr-item .sr-sub { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: 2px; }
.sr-item mark { background: color-mix(in srgb, var(--oak) 40%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-empty { padding: 26px; text-align: center; color: var(--fg-faint); font-size: var(--fs-sm); }

/* ---------------- Mobile drawer ---------------- */
#mobile-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(15,18,24,.45); }
@media (max-width: 860px) {
  :root { --sidebar-w: 280px; }
  #sidebar {
    position: fixed; left: 0; top: var(--topbar-h); z-index: 45;
    transform: translateX(-102%); transition: transform .26s ease;
    box-shadow: var(--shadow-lg);
  }
  #sidebar.open { transform: translateX(0); }
  .search-hint { display: none; }
  .brand-text { display: none; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  #content { padding: 28px 18px 100px; }
  /* Touch targets: sidebar course links >= 44px tall */
  .nav-course { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .term-list a { min-height: 44px; }
  /* Prevent page-level horizontal scroll from wide content */
  #content { overflow-x: hidden; }
  .diagram, table.data { margin-left: 0; margin-right: 0; }
}
@media (max-width: 480px) {
  .term-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- High Contrast Mode ---------------- */
/* Light high contrast — default :root and explicit light */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="light"] {
    --paper:        #FFFFFF;
    --paper-2:      #F0F0F0;
    --surface:      #FFFFFF;
    --surface-2:    #E8E8E8;
    --ink:          #000000;
    --ink-2:        #333333;
    --ink-3:        #555555;
    --line:         #000000;
    --line-strong:  #000000;
    --cambridge:    #003399;
    --cambridge-soft: #0044CC;
    --oak:          #8B4513;
    --oak-soft:     #A0522D;
    --crimson:      #8B0000;
    --success:      #006400;
    --warn:         #8B4513;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.8);
    --shadow-md: 0 4px 12px rgba(0,0,0,.8);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.9);
  }
}

/* Dark high contrast — system dark (not explicitly light) */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #000000;
    --paper-2:      #111111;
    --surface:      #000000;
    --surface-2:    #1A1A1A;
    --ink:          #FFFFFF;
    --ink-2:        #CCCCCC;
    --ink-3:        #AAAAAA;
    --line:         #FFFFFF;
    --line-strong:  #FFFFFF;
    --cambridge:    #66B2FF;
    --cambridge-soft: #80C0FF;
    --oak:          #FFD700;
    --oak-soft:     #FFE066;
    --crimson:      #FF6666;
    --success:      #66FF66;
    --warn:         #FFD700;

    --shadow-sm: 0 1px 2px rgba(255,255,255,.8);
    --shadow-md: 0 4px 12px rgba(255,255,255,.8);
    --shadow-lg: 0 18px 40px rgba(255,255,255,.9);
  }
}

/* Dark high contrast — explicit dark (even if system is light) */
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --paper:        #000000;
    --paper-2:      #111111;
    --surface:      #000000;
    --surface-2:    #1A1A1A;
    --ink:          #FFFFFF;
    --ink-2:        #CCCCCC;
    --ink-3:        #AAAAAA;
    --line:         #FFFFFF;
    --line-strong:  #FFFFFF;
    --cambridge:    #66B2FF;
    --cambridge-soft: #80C0FF;
    --oak:          #FFD700;
    --oak-soft:     #FFE066;
    --crimson:      #FF6666;
    --success:      #66FF66;
    --warn:         #FFD700;

    --shadow-sm: 0 1px 2px rgba(255,255,255,.8);
    --shadow-md: 0 4px 12px rgba(255,255,255,.8);
    --shadow-lg: 0 18px 40px rgba(255,255,255,.9);
  }
}