/* =====================================================================
   KINGSIDE — dark-mode.css
   Dark theme only. Activated by the "dark" class on <html>, which the
   inline boot script sets before first paint (no flash of the wrong theme).
   The brand is dark-first: every page defaults to dark except Home 2.
   ===================================================================== */

/* 1. Theme tokens --------------------------------------------------- */
html.dark {
  --bg: #0E0E0E;
  --bg-2: #121211;
  --surface: #161615;
  --surface-2: #1E1D1B;
  --fg: #F2EDE4;
  --fg-2: #CEC8BD;
  --muted: #8F897F;
  --line: rgba(242, 237, 228, 0.12);
  --line-strong: rgba(242, 237, 228, 0.36);
  --scrim: rgba(0, 0, 0, 0.7);

  --accent: #D9A93A;
  --accent-ink: #E4B652;
  --on-accent: #0E0E0E;

  --ok: #67CE92;
  --danger: #FF7A66;
  --warn: #E4B652;

  /* Board: deep charcoal squares, ivory and ink pieces with visible outlines */
  --sq-light: #2B2A26;
  --sq-dark: #1B1A18;
  --sq-hl: rgba(217, 169, 58, 0.42);
  --piece-w: #F2EDE4;
  --piece-w-stroke: #0E0E0E;
  --piece-b: #0E0E0E;
  --piece-b-stroke: #BDB6AA;
  --coord: rgba(242, 237, 228, 0.42);

  --ev-a: #D9A93A;
  --ev-b: #6FA595;
  --ev-c: #B48CC6;

  color-scheme: dark;
}

/* 2. Base ----------------------------------------------------------- */
html.dark body {
  background: var(--bg);
}

html.dark ::selection {
  background: var(--accent);
  color: #0E0E0E;
}

/* 3. Header, menu, footer ------------------------------------------- */
html.dark .site-header.is-scrolled {
  background: color-mix(in srgb, #0E0E0E 74%, transparent);
}

html.dark .menu {
  background: #F2EDE4;
  color: #0E0E0E;
}

html.dark .menu .menu__idx,
html.dark .menu .menu__link.is-active .menu__txt {
  color: #7A5A12;
}

html.dark .menu__link:hover .menu__txt {
  color: #7A5A12;
}

html.dark .menu .btn--accent:hover {
  color: #F2EDE4;
}

html.dark .site-footer {
  border-top-color: var(--line-strong);
}

html.dark .footer__mark {
  color: var(--fg);
}

/* 4. Media treatment: slightly darker, higher contrast monochrome --- */
html.dark .media img,
html.dark .panel__img,
html.dark .video-sec__frame img {
  filter: grayscale(1) contrast(1.12) brightness(0.86);
}

html.dark .hover-float img {
  filter: grayscale(1) contrast(1.15) brightness(0.9);
}

/* 5. Boards and pieces ---------------------------------------------- */
html.dark .board .board__frame {
  stroke: rgba(242, 237, 228, 0.5);
}

html.dark .hero__tilt::after {
  border-color: rgba(217, 169, 58, 0.35);
}

html.dark .gridhero__grid span.is-dark {
  background: rgba(242, 237, 228, 0.035);
}

html.dark .gridhero__grid span.is-move::after {
  background: var(--accent);
  opacity: 0.8;
}

html.dark .gridhero__foot {
  background: color-mix(in srgb, #0E0E0E 82%, transparent);
}

html.dark .page-hero__board {
  opacity: 0.5;
}

html.dark .puzzle__sq.is-target::after {
  background: var(--accent);
  opacity: 0.7;
}

html.dark .puzzle__sq.is-good {
  background: color-mix(in srgb, var(--ok) 40%, var(--sq-dark));
}

html.dark .puzzle__sq.is-bad {
  background: color-mix(in srgb, var(--danger) 40%, var(--sq-dark));
}

html.dark .stack__piece {
  opacity: 0.2;
}

html.dark .principle__piece,
html.dark .road__piece,
html.dark .program__piece {
  filter: drop-shadow(0 0 1px rgba(242, 237, 228, 0.25));
}

/* 6. Sections ------------------------------------------------------- */
html.dark .marquee--accent {
  background: var(--accent);
  color: #0E0E0E;
  border-color: var(--accent);
}

html.dark .marquee--accent .marquee__track em {
  color: #0E0E0E;
}

html.dark .marquee--accent .marquee__track>b {
  color: #0E0E0E;
  opacity: 0.5;
}

html.dark .big-cta {
  background: #080808;
  color: var(--fg);
  border-block: 1px solid var(--line);
}

html.dark .big-cta__board span {
  background: var(--fg);
}

html.dark .big-cta__board span.is-dark {
  opacity: 0.03;
}

html.dark .big-cta .btn--accent:hover {
  --btn-fill: var(--fg);
  color: #0E0E0E;
}

html.dark .big-cta .btn--line {
  color: var(--fg);
  border-color: var(--fg);
  --btn-fill: var(--fg);
}

html.dark .big-cta .btn--line:hover {
  color: #0E0E0E;
}

html.dark .mock {
  box-shadow: 18px 18px 0 -1px var(--bg), 18px 18px 0 0 var(--accent);
}

html.dark .plan--feature {
  background: var(--accent);
  color: #0E0E0E;
  border-color: var(--accent);
}

html.dark .plan--feature .label {
  color: #0E0E0E;
}

html.dark .plan--feature .plan__list .i {
  color: #0E0E0E;
}

html.dark .plan--feature .btn--accent {
  background: #0E0E0E;
  color: var(--fg);
  border-color: #0E0E0E;
  --btn-fill: var(--fg);
}

html.dark .plan--feature .btn--accent:hover {
  color: #0E0E0E;
}

html.dark .stack__card:nth-child(4) {
  background: var(--accent);
  color: #0E0E0E;
  border-color: var(--accent);
}

html.dark .stack__card:nth-child(4) .stack__title span,
html.dark .stack__card:nth-child(4) .stack__meta {
  color: #0E0E0E;
}

html.dark .stack__card:nth-child(4) .tag-list li {
  border-color: rgba(14, 14, 14, .4);
  color: #0E0E0E;
}

html.dark .stack__card:nth-child(4) .pc--w {
  fill: #0E0E0E;
  stroke: #0E0E0E;
}

html.dark .cal-strip__item--key,
html.dark .podium__step--1 .podium__block {
  color: #0E0E0E;
}

html.dark .t-card {
  background: var(--surface);
}

html.dark .quote__by img,
html.dark .dash-user img,
html.dark .welcome__img {
  filter: grayscale(1) brightness(0.9);
}

html.dark .flipclock__num::after {
  background: #0E0E0E;
}

html.dark .video-sec__frame {
  background: #000;
}

/* 7. Auth pages: the art side flips to ivory so the split stays strong */
html.dark .auth__art {
  background: #F2EDE4;
  color: #0E0E0E;
  --sq-light: #EAE2D3;
  --sq-dark: #C9BDA8;
  --coord: rgba(14, 14, 14, .45);
  --line: rgba(14, 14, 14, .14);
  --piece-b-stroke: #0E0E0E;
  --piece-w-stroke: #0E0E0E;
  --piece-w: #FBF8F2;
  --piece-b: #141414;
}

html.dark .auth__art .logo__sq {
  fill: #0E0E0E;
}

html.dark .auth__art .logo__knight {
  fill: #F2EDE4;
}

html.dark .auth__art .logo__sub,
html.dark .auth__art .label {
  color: rgba(14, 14, 14, .6);
}

html.dark .auth__art .icon-btn {
  border-color: rgba(14, 14, 14, .35);
  color: #0E0E0E;
}

html.dark .auth__art .icon-btn:hover {
  background: #0E0E0E;
  color: #F2EDE4;
}

html.dark .auth__art .auth__move,
html.dark .auth__art .auth__quote .mono {
  color: #7A5A12;
}

html.dark .mate {
  background: #F2EDE4;
  color: #0E0E0E;
}

html.dark .mate__king {
  --piece-b: #0E0E0E;
  --piece-b-stroke: #0E0E0E;
}

html.dark .mate .label {
  color: rgba(14, 14, 14, .6);
}

html.dark .mate__text em {
  color: #7A5A12;
}

/* 8. Overlays, forms, tables ---------------------------------------- */
html.dark .panel__dialog,
html.dark .modal__dialog {
  background: #121211;
}

html.dark .toast {
  background: #F2EDE4;
  color: #0E0E0E;
}

html.dark .notif__menu {
  background: #141413;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}

html.dark select.field__input option {
  background: #161615;
  color: #F2EDE4;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.9);
}

html.dark .table tbody tr:hover {
  background: rgba(242, 237, 228, 0.04);
}

html.dark .quiz,
html.dark .plan:not(.plan--feature),
html.dark .mock {
  background: var(--surface);
}

html.dark .seg__ind {
  background: var(--fg);
}

html.dark .to-top {
  background: var(--surface);
}

html.dark .to-top:hover {
  background: var(--accent);
}

html.dark .to-top:hover .pc--w {
  fill: #0E0E0E;
  stroke: #0E0E0E;
}

/* 9. Dashboard ------------------------------------------------------ */
html.dark .page-dash {
  background: #0A0A0A;
}

html.dark .dash-side {
  background: #141413;
  color: var(--fg);
  border-inline-end: 1px solid var(--line);
}

html.dark .dash-side .logo__sq {
  fill: var(--fg);
}

html.dark .dash-side .logo__knight {
  fill: #141413;
}

html.dark .dash-side__board {
  --sq-dark: rgba(217, 169, 58, .08);
}

html.dark .dnav__link {
  color: rgba(242, 237, 228, 0.66);
}

html.dark .dnav__link:hover,
html.dark .dnav__link.is-active {
  color: var(--fg);
}

html.dark .dash-side__kicker,
html.dark .dash-side .logo__sub {
  color: rgba(242, 237, 228, 0.5) !important;
}

html.dark .dash-side .icon-btn {
  border-color: rgba(242, 237, 228, 0.3);
}

html.dark .dash-top {
  background: color-mix(in srgb, #0A0A0A 82%, transparent);
}

html.dark .dcard,
html.dark .dsection {
  background: var(--surface);
  border-color: var(--line);
}

html.dark .dcard::before {
  background: var(--line-strong);
}

html.dark .dcard:hover::before {
  background: var(--accent);
}

html.dark .dcard--welcome {
  background: var(--accent);
  color: #0E0E0E;
  border-color: var(--accent);
}

html.dark .dcard--welcome::before {
  background: #0E0E0E;
}

html.dark .dcard--welcome .label,
html.dark .dcard--welcome .welcome__meta {
  color: rgba(14, 14, 14, .68);
}

html.dark .dcard--welcome .welcome__title em {
  color: #0E0E0E;
}

html.dark .dcard--welcome .welcome__meta span+span::before {
  color: #0E0E0E;
}

html.dark .dcard--welcome .btn--accent {
  background: #0E0E0E;
  color: var(--fg);
  border-color: #0E0E0E;
  --btn-fill: var(--fg);
}

html.dark .dcard--welcome .btn--accent:hover {
  color: #0E0E0E;
}

html.dark .dcard--welcome .btn--line {
  color: #0E0E0E;
  border-color: rgba(14, 14, 14, .5);
  --btn-fill: #0E0E0E;
}

html.dark .dcard--welcome .btn--line:hover {
  color: var(--fg);
}

html.dark .wk__corner,
html.dark .wk__day {
  background: var(--surface);
}

html.dark .wk__day.is-today {
  background: var(--accent);
  color: #0E0E0E;
}

html.dark .wk__day.is-today .mono {
  color: rgba(14, 14, 14, .7);
}

html.dark .ev {
  background: color-mix(in srgb, var(--evc) 16%, var(--surface));
}

html.dark .mo__cell.is-today .mo__num {
  background: var(--accent);
  color: #0E0E0E;
}

html.dark .entry-pass {
  background: var(--surface);
}

/* 10. Preloader and transitions keep their contrast in dark mode ---- */
html.dark .preloader {
  background: #0E0E0E;
  color: var(--fg);
}

html.dark .pl-sq {
  background: var(--fg);
}

html.dark .preloader .logo__sq {
  fill: var(--fg);
}

html.dark .preloader .logo__knight {
  fill: #0E0E0E;
}

html.dark .pt__grid span,
html.dark.is-entering .pt {
  background: #F2EDE4;
}

html.dark .pt__grid span.is-acc {
  background: var(--accent);
}

html.dark .pt__title {
  color: #0E0E0E;
}

/* 11. 404 / Coming soon --------------------------------------------- */
html.dark .px.is-on.px--d {
  background: var(--accent);
}

html.dark .soon__bg {
  opacity: 0.6;
  --sq-dark: #1F1E1B;
}

html.dark .flipclock--soon .flipclock__num {
  border-color: var(--line-strong);
}