/* ==========================================================================
   Fanout-style tokens for Algorithm Atlas. theme.css keeps the semantic
   algorithm palette (--st-*) and complexity grades (--cx-*) untouched; this
   block only restyles the chrome: flat neutrals, ink as the accent, small radii.
   ========================================================================== */
:root {
  --ground: #f7f7f8; --ground-deep: #f0f0f2; --surface: #ffffff; --surface-2: #fafafa; --surface-sunk: #f4f4f5;
  --veil: rgba(247, 247, 248, 0.86);
  --ink: #1d1d1d; --ink-2: #4a4a4a; --ink-3: #5a5a5a; --ink-4: #6b6b6b;
  --line: #e8e8ea; --line-2: #dedee2; --line-strong: #c9c9cf;
  --accent: #1d1d1d; --accent-ink: #ffffff; --accent-soft: rgba(29,29,29,.06); --accent-line: rgba(29,29,29,.32);
  --good: #0f9d58; --good-soft: rgba(15,157,88,.10); --warn: #e8822a; --warn-soft: rgba(232,130,42,.11); --bad: #dc2626; --bad-soft: rgba(220,38,38,.09);

  /* --- text that must stay readable (WCAG AA, 4.5:1) ---
     Track hues and the good/warn/bad tones are bright enough for fills but too light for small
     text on a white ground. Text made from a hue is capped at --text-lmax (OKLCH lightness);
     the *-text tones are the darker versions for words; --on-hue is the text on a hue fill. */
  --text-lmax:     0.5;
  --on-hue:        #ffffff;
  --good-text:     #00793a;
  --warn-text:     #ad4e00;
  --bad-text:      #b91c1c;
  --code-k: #a800bb; --code-s: #00702e; --code-n: #a24500; --code-c: #616161;
  --t-basics: #2f7cf6; --t-array: #2fa3d6; --t-pointers: #0d9488; --t-sorting: #6e56cf; --t-list: #7c3aed; --t-stack: #c2548f;
  --t-tree: #2ab673; --t-graph: #db2777; --t-backtrack: #e4402c; --t-dp: #e8822a; --t-greedy: #65a30d; --t-advanced: #475569; --t-design: #b7860b; --t-interview: #6e6e6e;
  --lift-1: 0 1px 2px #3b3b3b17, 0 0 0 1px #3b3b3b03;
  --lift-2: 0 1px 2px #3b3b3b17, 0 2px 4px #3b3b3b0d, 0 0 0 1px #3b3b3b03;
  --lift-3: 0 2px 4px #3b3b3b0d, 0 4px 8px #3b3b3b17, 0 8px 16px #3b3b3b1a, 0 0 0 1px #3b3b3b03;
  --sans: "Overused Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Departure Mono", "IBM Plex Mono", ui-monospace, monospace;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --ease: cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111213; --ground-deep: #0d0e0f; --surface: #191a1c; --surface-2: #1e1f21; --surface-sunk: #151617;
    --veil: rgba(17, 18, 19, 0.86);
    --ink: #f2f4f7; --ink-2: #c9ced6; --ink-3: #a9b0ba; --ink-4: #8a929e;
    --line: #2a2b2e; --line-2: #36373b; --line-strong: #4c4e54;
    --accent: #f2f4f7; --accent-ink: #111315; --accent-soft: rgba(242,244,247,.08); --accent-line: rgba(242,244,247,.36);
    --good: #4ed08a; --good-soft: rgba(78,208,138,.14); --warn: #f0a45b; --warn-soft: rgba(240,164,91,.14); --bad: #f87171; --bad-soft: rgba(248,113,113,.14);

    --text-lmax: 1; --on-hue: #111213;
    --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
    --code-k: var(--st-swap); --code-s: var(--good); --code-n: var(--st-compare); --code-c: var(--ink-4);
    --t-basics: #6ea2ff; --t-array: #5cc0e8; --t-pointers: #2dd4bf; --t-sorting: #a594f0; --t-list: #a78bfa; --t-stack: #e58bbd;
    --t-tree: #4ed08a; --t-graph: #f472b6; --t-backtrack: #f87171; --t-dp: #f0a45b; --t-greedy: #a3e635; --t-advanced: #94a3b8; --t-design: #e8c547; --t-interview: #a9b0ba;
    --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
    --lift-2: 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    --lift-3: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  }
}
:root[data-theme="dark"] {
  --ground: #111213; --ground-deep: #0d0e0f; --surface: #191a1c; --surface-2: #1e1f21; --surface-sunk: #151617;
  --veil: rgba(17, 18, 19, 0.86);
  --ink: #f2f4f7; --ink-2: #c9ced6; --ink-3: #a9b0ba; --ink-4: #8a929e;
  --line: #2a2b2e; --line-2: #36373b; --line-strong: #4c4e54;
  --accent: #f2f4f7; --accent-ink: #111315; --accent-soft: rgba(242,244,247,.08); --accent-line: rgba(242,244,247,.36);
  --good: #4ed08a; --good-soft: rgba(78,208,138,.14); --warn: #f0a45b; --warn-soft: rgba(240,164,91,.14); --bad: #f87171; --bad-soft: rgba(248,113,113,.14);

  --text-lmax: 1; --on-hue: #111213;
  --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
  --code-k: var(--st-swap); --code-s: var(--good); --code-n: var(--st-compare); --code-c: var(--ink-4);
  --t-basics: #6ea2ff; --t-array: #5cc0e8; --t-pointers: #2dd4bf; --t-sorting: #a594f0; --t-list: #a78bfa; --t-stack: #e58bbd;
  --t-tree: #4ed08a; --t-graph: #f472b6; --t-backtrack: #f87171; --t-dp: #f0a45b; --t-greedy: #a3e635; --t-advanced: #94a3b8; --t-design: #e8c547; --t-interview: #a9b0ba;
  --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --lift-2: 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --lift-3: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
}

/* ==========================================================================
   Skin — Fanout-style look layered over the base components.
   Monochrome ink, grotesk text, IBM Plex Mono for every label/meta line,
   Departure Mono for the wordmark and big numerals, small radii, hairlines.
   Loaded after theme.css so it only overrides.
   ========================================================================== */

/* ---------- fonts (vendored, OFL — works offline) ---------- */
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Book.woff2) format("woff2"); font-weight: 350; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Roman.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-SemiBold.woff2) format("woff2"); font-weight: 550 600; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url(../fonts/OverusedGrotesk-Bold.woff2) format("woff2"); font-weight: 650 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-500.woff2) format("woff2"); font-weight: 500 550; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Departure Mono"; src: url(../fonts/DepartureMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- base type ---------- */
body { letter-spacing: 0; line-height: 1.5; }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
a { color: var(--ink); }
a:hover { text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--ink); color: var(--ground); }
kbd { font-family: var(--mono); border-radius: var(--r-xs); box-shadow: none; }

/* every small uppercase label becomes a quiet mono meta line */
.eyebrow, .lv, .note-t, .code-lang, .p-group, .foot-col h2,
.tcard .tcard-track, .tcard .tcard-mins, .stage-track h4, .obj .obj-h, .rail-sec .rail-h,
.pager small, .reflink .rk, .ctl label, .lab-out .lo-l, .refcard .rc-meta {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.eyebrow { font-size: var(--fs-fine); color: var(--ink-3); margin-bottom: 12px; }
.eyebrow::before { content: "// "; color: var(--ink-4); }

/* ---------- chrome ---------- */
.chrome {
  background: var(--veil);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.brand-mark { color: var(--ink); }
.brand-name { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0; }
.nav a { font-size: var(--fs-small); color: var(--ink-3); border-radius: var(--r-sm); }
.nav a:hover { background: var(--ground-deep); }
.nav a[aria-current="page"] { font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.tool { border-radius: var(--r-sm); border-color: var(--line-2); font-family: var(--mono); font-size: var(--fs-fine); }
.tool:hover { background: var(--ground-deep); }
.chrome-progress > span { background: var(--ink); }

/* ---------- controls ---------- */
.btn { border-radius: var(--r-sm); font-weight: 500; letter-spacing: 0; background: var(--surface); border-color: var(--line-2); }
.btn:hover { background: var(--ground-deep); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink); filter: none; opacity: .86; }
.btn-ghost { background: transparent; }
.seg, .seg button { border-radius: var(--r-sm); }
.seg button { font-family: var(--mono); }
.seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.field, .quiz-opt, .p-item { border-radius: var(--r-sm); }
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { background: var(--ground); }

/* pills: squarer, mono */
.pill { border-radius: var(--r-xs); font-family: var(--mono); font-weight: 400; letter-spacing: 0; background: var(--surface-sunk); }

/* ---------- cards & surfaces ---------- */
.card { border-radius: var(--r-md); border-color: var(--line-2); box-shadow: none; }
a.card:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--lift-2); }
.card h3, .card .card-t { font-weight: 500; letter-spacing: -0.005em; }
.tcard::before { width: 2px; opacity: 1; border-radius: 0; top: 0; bottom: 0; }
a.tcard:hover::before { top: 0; bottom: 0; }
.tcard { overflow: hidden; }

.stats, .kv, .table-wrap, .num, .fig-box, .quiz, .to-card, .note, .code { border-color: var(--line-2); }
.stat b, .num-v { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.stat span, .num-l, .num-n { font-family: var(--mono); }
.meter, .meter > span { border-radius: 0; }
.meter { height: 4px; }

/* callouts: flat, mono title, no tint for the default */
.note { border-left-width: 2px; }
.note-principle { font-family: var(--sans); font-size: 1.08rem; font-weight: 400; border-left-width: 2px; }
.note-principle .note-t { font-family: var(--mono); }

/* code: a touch warmer mono block */
.code { background: var(--surface); font-size: var(--fs-fine); }
.prose code, .topic-body code { border-radius: var(--r-xs); font-size: .84em; }
table.t thead th, table.t thead td { font-family: var(--mono); font-weight: 400; }
.step::before { font-family: var(--mono); font-weight: 500; border-radius: var(--r-xs); }

/* ---------- home ---------- */
/* faint engineering-paper grid behind the hero, fading out toward the bottom */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 30%, transparent 75%);
}
.hero h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.hero h1 .dim { color: var(--ink-4); }
.hero-sub { letter-spacing: 0; color: var(--ink-3); }
.hero-fine { font-family: var(--mono); font-size: var(--fs-fine); }
.hero-canvas { opacity: .35; }
.feat-txt h3 { font-weight: 500; letter-spacing: -0.015em; }
.feat-txt li::before { border-radius: 0; background: var(--ink); }

/* ---------- footer, palette, toasts ---------- */
.foot { background: var(--ground); }
.foot-mark { font-family: var(--display); font-weight: 400; }
.palette-box { border-radius: var(--r-lg); }
.palette-field input { letter-spacing: 0; }
.p-item .p-s { font-family: var(--mono); }
.toast { border-radius: var(--r-sm); font-family: var(--mono); font-weight: 400; }

/* ---------- small fixes for monochrome accent ---------- */
.rub-dot[aria-pressed="true"] { color: var(--accent-ink); }
.toc a[data-active="1"] { border-left-color: var(--ink); }