/*
 * Nest theming
 *
 * how it works:
 *   - each theme defines a semantic palette (--bg-app, --text-strong, etc.)
 *   - we override tailwind v4's `--color-*` tokens to point at those semantic vars,
 *     so utilities like `bg-white`, `text-gray-700`, `border-gray-200` re-skin
 *     automatically
 *   - the codebase also uses arbitrary tailwind values like `bg-[#f9fafc]`. those
 *     bake the literal hex into the generated css, so we override each one
 *     explicitly at the bottom of this file
 *
 * to add a new theme: copy a block, change the semantic vars, done.
 */

/* ---------- default (light / Nest) ---------- */
:root,
[data-theme="light"] {
  /* surfaces — recycled paper, not clinical white */
  --bg-app: #eae6e2;
  --bg-elev: #ffffff;
  --bg-elev-2: #f7f4f0;
  --bg-elev-3: #efeae5;
  --bg-sunken: #ded8d2;
  --bg-dark: #1c3a26;
  --bg-darker: #132f1e;

  /* text — dark forest ink on pale surfaces */
  --text-strong: #132f1e;
  --text: #2e522b;
  --text-soft: #47614a;
  /* Tuned against the paper ground (#eae6e2), not white: at #607067 muted body
     copy came out at 4.22:1 and failed AA. These clear it on paper, white and
     the sunken surface alike. */
  --text-muted: #526158;
  --text-faint: #68776d;
  --text-on-dark: #ffffff;
  --text-link: #155a72;

  /* borders */
  --border-soft: #efeae5;
  --border: rgba(19, 47, 30, 0.14);
  --border-strong: rgba(19, 47, 30, 0.32);
  --border-card: rgba(19, 47, 30, 0.22);

  /* brand
   *
   * --accent is forest, not leaf (#76b070). The codebase pairs `bg-[#ec3750]`
   * with a hardcoded `text-white` in ~800 places; white on leaf is about
   * 2.1:1 and fails AA, while white on forest is about 9:1. Leaf is the
   * hover/tint here, and the real leaf-and-dashed KiwiHacks button ships as
   * .kh-button--primary in kiwihacks.css for hero actions. */
  --accent: #2e522b;
  --accent-strong: #1f3d1e;
  --accent-soft: rgba(118, 176, 112, 0.15);
  --accent-on: #ffffff;

  /* states */
  --success: #205b2a;
  --success-strong: #17441f;
  --success-soft: #ddf2df;
  --warning: #6a4b00;
  --warning-strong: #513900;
  --danger: #8a241e;
  --danger-strong: #6d1c17;
  --info: #155a72;

  /* shadows — physical and simple, never glossy */
  --shadow-sm: 0 1px 2px rgba(19, 47, 30, 0.14);
  --shadow-md: 0 2px 4px rgba(19, 47, 30, 0.18);
  --shadow-lg: 0 8px 18px rgba(19, 47, 30, 0.14);

  color-scheme: light;
}

/* ---------- dark (neutral, brand-preserving) ---------- */
[data-theme="dark"] {
  --bg-app: #0f1115;
  --bg-elev: #161922;
  --bg-elev-2: #1c2030;
  --bg-elev-3: #242938;
  --bg-sunken: #2a2f40;
  --bg-dark: #0a0c11;
  --bg-darker: #07090d;

  --text-strong: #f3f4f8;
  --text: #d6dae5;
  --text-soft: #aab1c1;
  --text-muted: #8089a0;
  /* #5b6377 was 2.9:1 on --bg-elev; form hints use this tone. */
  --text-faint: #7c86a0;
  --text-on-dark: #f3f4f8;
  --text-link: #7dabff;

  --border-soft: #1d2231;
  --border: #2a3043;
  --border-strong: #3a4159;
  --border-card: #2a3043;

  /* The neutral dark theme is the brand-preserving counterpart to the default,
     so its accent is KiwiHacks leaf — the brand green that carries on a dark
     ground. Ink text on leaf, not white: white on leaf is about 2.1:1. */
  --accent: #76b070;
  --accent-strong: #88bc82;
  --accent-soft: rgba(118, 176, 112, 0.16);
  --accent-on: #132f1e;

  --success: #33d6a6;
  --success-strong: #4ee2b4;
  --success-soft: rgba(51, 214, 166, 0.14);
  --warning: #ff8c37;
  --warning-strong: #ffa55c;
  --danger: #ff5670;
  --danger-strong: #ff7588;
  --info: #5aa4e6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ---------- retro (90s desktop) ----------
 *
 * Desktop grey with warm beige panels, navy selection and hard-edged bevels.
 * This is a *light* theme, so it deliberately stays out of the dark-only
 * blocks further down (the 700/800/900 hue inversion and the legacy component
 * overrides) — those would invert the tints and break it.
 *
 * Every text tone here is tuned against #c0c0c0, the darkest common ground.
 * The obvious 90s values (#008000 green, #800000 maroon) land around 3.5:1 on
 * that grey, so the state colours are darkened to clear AA while keeping the
 * hue. */
[data-theme="retro"] {
  /* surfaces — desktop grey, beige window chrome, white document areas */
  --bg-app: #c0c0c0;
  --bg-elev: #dfdfd8;
  --bg-elev-2: #d2d2ca;
  --bg-elev-3: #c7c7bf;
  --bg-sunken: #b6b6ad;
  --bg-dark: #3a3a38;
  --bg-darker: #1a1a1a;

  /* text */
  --text-strong: #1a1a1a;
  --text: #2e2e2c;
  --text-soft: #41413b;
  --text-muted: #484841;
  --text-faint: #5c5c54;
  --text-on-dark: #ffffff;
  --text-link: #00006e;

  /* borders — solid and chunky, not soft alpha */
  --border-soft: #d4d4cc;
  --border: #9a9a92;
  --border-strong: #6e6e68;
  --border-card: #808080;

  /* brand — the navy selection bar */
  --accent: #000080;
  --accent-strong: #00005c;
  --accent-soft: rgba(0, 0, 128, 0.14);
  --accent-on: #ffffff;

  /* states */
  --success: #175220;
  --success-strong: #0f3d17;
  --success-soft: #cfe3cf;
  --warning: #5c4300;
  --warning-strong: #453200;
  --danger: #7d1717;
  --danger-strong: #5f1111;
  --info: #0a4a6e;

  /* shadows — hard offset drops, never blurred. This is most of the era. */
  --shadow-sm: 1px 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 2px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-lg: 3px 3px 0 rgba(0, 0, 0, 0.40);

  /* bevel pair used by the component block below */
  --retro-hi: #ffffff;
  --retro-lo: #7c7c76;

  color-scheme: light;
}

/* Period-appropriate UI type. All system faces, so nothing hits the network.
 *
 * This needs the doubled selector: kiwihacks.css declares --kh-font-* on a bare
 * :root and loads after this file, so a plain [data-theme="retro"] would tie on
 * specificity and lose on source order. */
:root[data-theme="retro"] {
  --kh-font-body: Tahoma, Verdana, "Segoe UI", "MS Sans Serif", Geneva, sans-serif;
  --kh-font-display: Tahoma, Verdana, "Segoe UI", "MS Sans Serif", Geneva, sans-serif;
}

/* Outset bevels — the detail that makes this read as a 90s desktop rather than
 * a beige recolour. Scoped to the theme so light and dark are untouched.
 *
 * Only classes the views actually use are listed. hackclub.css also defines
 * .card-hc, .btn-hc-*, .search-trigger and .header-icon-btn, but nothing in
 * app/ applies them, so styling those here would be dead weight. */
[data-theme="retro"] {
  .sidebar-pill {
    border: 1px solid var(--retro-lo);
    border-top-color: var(--retro-hi);
    border-left-color: var(--retro-hi);
    border-radius: 0;
  }

  .kh-button {
    border: 2px solid var(--retro-lo);
    border-top-color: var(--retro-hi);
    border-left-color: var(--retro-hi);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
  }

  /* pressed-in, the way a 90s button inverts its bevel */
  .kh-button:active {
    border-color: var(--retro-hi);
    border-top-color: var(--retro-lo);
    border-left-color: var(--retro-lo);
    box-shadow: none;
    transform: none;
  }

  .nav-item-active {
    background: var(--accent);
    color: var(--accent-on);
    border-radius: 0;
  }

  .nav-item-active svg { color: var(--accent-on); }
}

/* ====================================================================
 * tailwind v4 default color token overrides
 *
 * tailwind v4 exposes every theme color as a `--color-*` css variable
 * and its utilities reference them via `var(--color-*)`. by overriding
 * the variables inside a theme scope, every utility built on those
 * tokens (bg-white, text-gray-700, border-red-500, etc.) re-skins for
 * free.
 *
 * we re-declare them on `:root` too so the default theme keeps the same
 * literal values tailwind ships with.
 * ==================================================================== */

/* Applies to every theme including the default. These map onto the semantic
 * vars declared above, so the light theme now picks up the KiwiHacks palette
 * without touching the thousand-odd utility classes across the views. */
:root {
  --color-white: var(--bg-elev);
  --color-black: var(--bg-darker);

  --color-gray-50: var(--bg-app);
  --color-gray-100: var(--bg-elev-2);
  --color-gray-200: var(--border);
  --color-gray-300: var(--border-strong);
  --color-gray-400: var(--text-faint);
  --color-gray-500: var(--text-muted);
  --color-gray-600: var(--text-soft);
  --color-gray-700: var(--text);
  --color-gray-800: var(--text-strong);
  --color-gray-900: var(--text-strong);
  --color-gray-950: var(--bg-darker);

  --color-slate-50: var(--bg-app);
  --color-slate-100: var(--bg-elev-2);
  --color-slate-200: var(--border);
  --color-slate-300: var(--border-strong);
  --color-slate-400: var(--text-faint);
  --color-slate-500: var(--text-muted);
  --color-slate-600: var(--text-soft);
  --color-slate-700: var(--text);
  --color-slate-800: var(--text-strong);
  --color-slate-900: var(--text-strong);

  --color-zinc-50: var(--bg-app);
  --color-zinc-100: var(--bg-elev-2);
  --color-zinc-200: var(--border);
  --color-zinc-300: var(--border-strong);
  --color-zinc-700: var(--text);
  --color-zinc-800: var(--text-strong);
  --color-zinc-900: var(--text-strong);

  --color-neutral-100: var(--bg-elev-2);
  --color-neutral-200: var(--border);
  --color-neutral-700: var(--text);
  --color-neutral-800: var(--text-strong);
  --color-neutral-900: var(--text-strong);

  /* 600-level status fills. These are used as `bg-*-600 text-white` buttons in
   * ~23 places, and tailwind's own values land at 3.2:1 (green), 2.9:1 (amber)
   * and 4.0:1 (red) against white — all short of AA. The semantic tokens are
   * tuned per theme, and `text-white` resolves to --bg-elev, so the pair stays
   * legible in both polarities. The dark-theme hue block below re-overrides the
   * 700s it needs. */
  --color-green-600: var(--success);
  --color-green-700: var(--success-strong);
  --color-emerald-600: var(--success);
  --color-yellow-600: var(--warning);
  --color-amber-600: var(--warning);
  --color-red-500: var(--danger);
  --color-red-600: var(--danger);
  --color-red-700: var(--danger-strong);

  /* blue-600 carries links, checkbox fills and 37 `bg-blue-600 hover:bg-blue-700`
   * buttons. Tailwind's blue-600 is 4.23:1 on paper. --info is the KiwiHacks
   * informational ink; 700 is mixed darker so the hover stays the same hue. */
  --color-blue-600: var(--info);
  --color-blue-700: color-mix(in oklab, var(--info) 82%, var(--text-strong));
}

/* ====================================================================
 * hue scales, dark themes only
 *
 * These flip the 700/800/900 shades to light tints so text stays readable
 * on a dark surface. That inversion is wrong on paper — bg-green-700 would
 * come out mint and text-green-800 near-invisible — so the default theme
 * keeps tailwind's own scale.
 * ==================================================================== */

[data-theme="dark"] {
  /* tinted surfaces (the 50/100/200 shades that show up as light-tinted
   * cards on white) get mapped to dark tinted surfaces. the 500/600 stay
   * saturated for accent buttons. the 700/800/900 (typically used for text
   * on those light tints) get flipped to light tints of the same hue so
   * text stays readable. we use color-mix against bg-elev so each theme's
   * surface tone shows through. */
  --color-red-50:  color-mix(in oklab, #ef4444 12%, var(--bg-elev));
  --color-red-100: color-mix(in oklab, #ef4444 20%, var(--bg-elev));
  --color-red-200: color-mix(in oklab, #ef4444 28%, var(--bg-elev));
  --color-red-700: #fca5a5;
  --color-red-800: #fecaca;
  --color-red-900: #fee2e2;

  --color-orange-50:  color-mix(in oklab, #f97316 12%, var(--bg-elev));
  --color-orange-100: color-mix(in oklab, #f97316 20%, var(--bg-elev));
  --color-orange-200: color-mix(in oklab, #f97316 28%, var(--bg-elev));
  --color-orange-700: #fdba74;
  --color-orange-800: #fed7aa;

  --color-amber-50:  color-mix(in oklab, #f59e0b 14%, var(--bg-elev));
  --color-amber-100: color-mix(in oklab, #f59e0b 22%, var(--bg-elev));
  --color-amber-200: color-mix(in oklab, #f59e0b 30%, var(--bg-elev));
  --color-amber-700: #fcd34d;
  --color-amber-800: #fde68a;
  --color-amber-900: #fef3c7;

  --color-yellow-50:  color-mix(in oklab, #eab308 14%, var(--bg-elev));
  --color-yellow-100: color-mix(in oklab, #eab308 22%, var(--bg-elev));
  --color-yellow-200: color-mix(in oklab, #eab308 30%, var(--bg-elev));
  --color-yellow-700: #fde047;
  --color-yellow-800: #fef08a;

  --color-green-50:  color-mix(in oklab, #22c55e 12%, var(--bg-elev));
  --color-green-100: color-mix(in oklab, #22c55e 20%, var(--bg-elev));
  --color-green-200: color-mix(in oklab, #22c55e 28%, var(--bg-elev));
  --color-green-700: #86efac;
  --color-green-800: #bbf7d0;
  --color-green-900: #dcfce7;

  --color-emerald-50:  color-mix(in oklab, #10b981 12%, var(--bg-elev));
  --color-emerald-100: color-mix(in oklab, #10b981 20%, var(--bg-elev));
  --color-emerald-700: #6ee7b7;
  --color-emerald-800: #a7f3d0;

  --color-teal-50:  color-mix(in oklab, #14b8a6 12%, var(--bg-elev));
  --color-teal-100: color-mix(in oklab, #14b8a6 20%, var(--bg-elev));

  --color-sky-50:  color-mix(in oklab, #0ea5e9 12%, var(--bg-elev));
  --color-sky-100: color-mix(in oklab, #0ea5e9 20%, var(--bg-elev));
  --color-sky-700: #7dd3fc;
  --color-sky-800: #bae6fd;

  --color-blue-50:  color-mix(in oklab, #3b82f6 12%, var(--bg-elev));
  --color-blue-100: color-mix(in oklab, #3b82f6 20%, var(--bg-elev));
  --color-blue-200: color-mix(in oklab, #3b82f6 28%, var(--bg-elev));
  --color-blue-700: #93c5fd;
  --color-blue-800: #bfdbfe;
  --color-blue-900: #dbeafe;

  --color-indigo-50:  color-mix(in oklab, #6366f1 12%, var(--bg-elev));
  --color-indigo-100: color-mix(in oklab, #6366f1 20%, var(--bg-elev));
  --color-indigo-700: #a5b4fc;
  --color-indigo-800: #c7d2fe;

  --color-violet-50:  color-mix(in oklab, #8b5cf6 12%, var(--bg-elev));
  --color-violet-100: color-mix(in oklab, #8b5cf6 20%, var(--bg-elev));
  --color-violet-700: #c4b5fd;
  --color-violet-800: #ddd6fe;

  --color-purple-50:  color-mix(in oklab, #a855f7 12%, var(--bg-elev));
  --color-purple-100: color-mix(in oklab, #a855f7 20%, var(--bg-elev));
  --color-purple-200: color-mix(in oklab, #a855f7 28%, var(--bg-elev));
  --color-purple-700: #d8b4fe;
  --color-purple-800: #e9d5ff;

  --color-pink-50:  color-mix(in oklab, #ec4899 12%, var(--bg-elev));
  --color-pink-100: color-mix(in oklab, #ec4899 20%, var(--bg-elev));
  --color-pink-700: #f9a8d4;
  --color-pink-800: #fbcfe8;

  --color-rose-50:  color-mix(in oklab, #f43f5e 12%, var(--bg-elev));
  --color-rose-100: color-mix(in oklab, #f43f5e 20%, var(--bg-elev));
  --color-rose-700: #fda4af;
  --color-rose-800: #fecdd3;
}

/* ====================================================================
 * arbitrary hex utility overrides
 *
 * tailwind bakes the literal hex into utilities like `bg-[#f9fafc]`,
 * so we can't theme those via @theme. instead we use the same class
 * selector tailwind generates (with css escaping for `[`, `#`, `]`)
 * and remap to semantic vars under each non-default theme scope.
 *
 * these apply to every theme, default included — that is what retires the
 * inherited hack club red across the app without editing each view.
 * ==================================================================== */

:root {
  /* backgrounds */
  .bg-\[\#f9fafc\] { background-color: var(--bg-app); }
  .bg-\[\#f7f7f9\] { background-color: var(--bg-elev-2); }
  .bg-\[\#e5e7eb\] { background-color: var(--border); }
  .bg-\[\#17171d\] { background-color: var(--bg-dark); }
  .bg-\[\#252429\] { background-color: var(--bg-elev-2); }
  .bg-\[\#1a1a2e\] { background-color: var(--bg-darker); }
  .bg-\[\#1a1d21\] { background-color: var(--bg-elev-2); }
  .bg-\[\#4A154B\] { background-color: var(--bg-darker); }
  .bg-\[\#ec3750\] { background-color: var(--accent); }
  .bg-\[\#ec3750\]\/10 { background-color: var(--accent-soft); }
  .bg-\[\#33d6a6\]\/10 { background-color: var(--success-soft); }

  /* text */
  .text-\[\#1f2d3d\] { color: var(--text-strong); }
  .text-\[\#3c4858\] { color: var(--text); }
  .text-\[\#5a6473\] { color: var(--text-soft); }
  .text-\[\#8492a6\] { color: var(--text-muted); }
  .text-\[\#33d6a6\] { color: var(--success); }
  .text-\[\#ec3750\] { color: var(--accent); }
  .text-\[\#ff8c37\] { color: var(--warning); }

  /* borders */
  .border-\[\#e0e6ed\] { border-color: var(--border-card); }
  .border-\[\#e5e7eb\] { border-color: var(--border); }
  .border-\[\#252429\] { border-color: var(--border); }
  .border-\[\#ec3750\] { border-color: var(--accent); }
  .border-\[\#ec3750\]\/30 { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
  .border-\[\#33d6a6\]\/30 { border-color: color-mix(in oklab, var(--success) 30%, transparent); }
  .border-\[\#ff8c37\] { border-color: var(--warning); }
  .border-l-\[\#ec3750\] { border-left-color: var(--accent); }
  .border-l-\[\#33d6a6\] { border-left-color: var(--success); }

  /* interactive states */
  .hover\:bg-\[\#252429\]:hover { background-color: var(--bg-elev-3); }
  .hover\:bg-\[\#3e1240\]:hover { background-color: var(--bg-darker); }
  .hover\:bg-\[\#d42f46\]:hover { background-color: var(--accent-strong); }
  .hover\:bg-\[\#ec3750\]:hover { background-color: var(--accent); }
  .hover\:bg-\[\#f9fafc\]:hover { background-color: var(--bg-elev-2); }
  .hover\:border-\[\#ec3750\]:hover { border-color: var(--accent); }
  .hover\:text-\[\#1f2d3d\]:hover { color: var(--text-strong); }
  .hover\:text-\[\#2ab890\]:hover { color: var(--success-strong); }
  .hover\:text-\[\#3c4858\]:hover { color: var(--text); }
  .hover\:text-\[\#d42f46\]:hover { color: var(--accent-strong); }
  .hover\:text-\[\#ec3750\]:hover { color: var(--accent); }
  .group:hover .group-hover\:text-\[\#ec3750\] { color: var(--accent); }
  .focus\:border-\[\#ec3750\]:focus { border-color: var(--accent); }
  .focus\:ring-\[\#ec3750\]:focus { --tw-ring-color: var(--accent); }
  .focus\:ring-\[\#ec3750\]\/30:focus { --tw-ring-color: color-mix(in oklab, var(--accent) 30%, transparent); }
  .focus\:ring-\[\#ec3750\]\/40:focus { --tw-ring-color: color-mix(in oklab, var(--accent) 40%, transparent); }
  .focus-within\:ring-\[\#ec3750\]:focus-within { --tw-ring-color: var(--accent); }
  .has-\[\:checked\]\:ring-\[\#ec3750\]:has(:checked) { --tw-ring-color: var(--accent); }
  .has-\[\:checked\]\:border-\[\#ec3750\]:has(:checked) { border-color: var(--accent); }
  .peer-checked\:bg-\[\#ec3750\]:is(:where(.peer):checked ~ *) { background-color: var(--accent); }
  .accent-\[\#ec3750\] { accent-color: var(--accent); }
  .hover\:bg-\[\#d63146\]:hover { background-color: var(--accent-strong); }

  /* accent tints — the /5, /25 and /30 washes behind callouts and selected rows */
  .bg-\[\#ec3750\]\/5 { background-color: color-mix(in oklab, var(--accent) 5%, transparent); }
  .bg-\[\#ec3750\]\/25 { background-color: color-mix(in oklab, var(--accent) 25%, transparent); }
  .bg-\[\#ec3750\]\/30 { background-color: color-mix(in oklab, var(--accent) 30%, transparent); }
  .hover\:bg-\[\#ec3750\]\/5:hover { background-color: color-mix(in oklab, var(--accent) 5%, transparent); }

  /* inherited hack club blue — informational links, banners and icons */
  .bg-\[\#338eda\] { background-color: var(--info); }
  .bg-\[\#338eda\]\/10 { background-color: color-mix(in oklab, var(--info) 10%, transparent); }
  .bg-\[\#338eda\]\/20 { background-color: color-mix(in oklab, var(--info) 20%, transparent); }
  .border-\[\#338eda\]\/30 { border-color: color-mix(in oklab, var(--info) 30%, transparent); }
  .text-\[\#338eda\] { color: var(--info); }
  .hover\:bg-\[\#2a7bc4\]:hover { background-color: color-mix(in oklab, var(--info) 82%, var(--text-strong)); }
  .hover\:text-\[\#2a7bc4\]:hover { color: color-mix(in oklab, var(--info) 82%, var(--text-strong)); }

  /* inherited hack club green */
  .bg-\[\#33d6a6\]\/15 { background-color: var(--success-soft); }
}

/* ====================================================================
 * dark bands inside a light theme
 *
 * --text-muted and --text-faint are tuned for pale surfaces. The footer and
 * other --bg-dark bands need a tone derived from the on-dark text colour
 * instead, or muted copy lands at about 2.4:1 in the default theme. Deriving
 * it keeps every other theme correct for free.
 * ==================================================================== */

:root {
  --text-muted-on-dark: color-mix(in oklab, var(--text-on-dark) 72%, var(--bg-dark));
  --text-faint-on-dark: color-mix(in oklab, var(--text-on-dark) 55%, var(--bg-dark));
}

/* Retro's --bg-dark is a mid grey rather than the deep forest the other themes
 * use, so the mixes above land too close to it — the footer build stamp came
 * out at 4.4:1. Lift the ratio. This has to sit *after* the :root block above,
 * since both carry the same specificity and the later one wins. */
[data-theme="retro"] {
  --text-muted-on-dark: color-mix(in oklab, var(--text-on-dark) 88%, var(--bg-dark));
  --text-faint-on-dark: color-mix(in oklab, var(--text-on-dark) 76%, var(--bg-dark));
}

/* ====================================================================
 * hack club legacy variables — keep them aligned with the active theme
 * so .btn-hc-primary, .card-hc, .nav-item, etc. all re-skin.
 * ==================================================================== */

:root {
  --hc-snow: var(--bg-app);
  --hc-smoke: var(--border-card);
  --hc-white: var(--bg-elev);
  --hc-black: var(--text-strong);
  --hc-slate: var(--text);
  --hc-muted: var(--text-muted);
  --hc-dark: var(--bg-dark);
  --hc-darker: var(--bg-darker);
  --hc-darkless: var(--bg-elev-2);
  --hc-red: var(--accent);
  --hc-orange: var(--warning);
  --hc-green: var(--success);
  --hc-blue: var(--info);
  --hc-primary: var(--accent);
}

/* legacy css component overrides for dark-ish themes (the .nav-item etc.
 * in hackclub.css use literal hex values that aren't variables) */
[data-theme="dark"] {
  .nav-item { color: var(--text); }
  .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-strong); }
  .nav-item-active { background: var(--bg-elev-3); color: var(--text-strong); }
  .nav-item svg { color: var(--text-muted); }
  .nav-item-active svg { color: var(--text-strong); }

  .sidebar-pill { background: var(--bg-elev); border-color: var(--border); }
  .sidebar-pill:hover { border-color: var(--border-strong); }

  .sidebar-dropdown { background: var(--bg-elev); border-color: var(--border); }
  .sidebar-dropdown-item { color: var(--text-strong); }
  .sidebar-dropdown-item:hover { background: var(--bg-elev-3); }
  .sidebar-dropdown-item-active { background: var(--bg-elev-3); }

  .sidebar-icon-btn { color: var(--text-muted); }
  .sidebar-icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-strong); }

  .search-trigger { background: var(--bg-elev-2); border-color: var(--border); color: var(--text-muted); }
  .search-trigger:hover { border-color: var(--border-strong); }
  .search-trigger kbd { background: var(--bg-elev-3); color: var(--text-muted); }

  .header-icon-btn { color: var(--text-muted); }
  .header-icon-btn:hover { background: var(--bg-elev-3); color: var(--text-strong); }

  .card-hc { background-color: var(--bg-elev); }
  .card-hc-sunken { background-color: var(--bg-elev-2); }
  .card-hc-interactive { background-color: var(--bg-elev); }
}

/* keep system scrollbars + form controls consistent with theme */
[data-theme="dark"] {
  input, select, textarea {
    background-color: var(--bg-elev);
    color: var(--text-strong);
  }
  input::placeholder, textarea::placeholder {
    color: var(--text-muted);
  }
}