/* ─── DARK MODE TOKEN OVERRIDES ──────────────────────────── */
/*
 * Loaded unconditionally rather than behind prefers-color-scheme: the toggle
 * works via data-theme, which header.php's inline script sets before first paint.
 */

[data-theme="dark"] {
  /* Backgrounds. The page is the floor and every other surface sits above it —
     see the elevation note in main.css's :root. --color-bg-secondary was
     #0a0a0a, below the page, while the four panels that carry a box-shadow all
     paint with it. */
  --color-bg:              #0d0d0d;
  --color-bg-secondary:    #101010;
  --color-bg-code:         #111;
  --color-bg-code-header:  #161616;
  --color-bg-aside:        #111;

  /* Borders */
  --color-border-subtle:   #1e1e1e;
  --color-border:          #2a2a2a;

  /* Text */
  --color-text:            #d4d4d4;
  /* The two-tone secondary ramp, the same one light runs — dim is the stronger
     half and muted the quieter, in both schemes. The hex relationship inverts
     because "stronger" on a near-black page means lighter, not darker, so read
     these as contrast rather than as values: 8.00:1 against --color-bg-secondary
     and 5.37:1, against light's 7.57:1 and 5.00:1. Both were #888, which flattened
     every pair the two are meant to separate — a card's description from its meta
     line, a post excerpt from its byline, a rail's section label from its rows. */
  --color-text-muted:      #888;
  --color-text-dim:        #a8a8a8;
  --color-text-heading:    #f0f0f0;
  --color-text-code:       #d4d4d4;

  /* Brand */
  --color-accent:          #3dd68c;
  --color-accent-hover:    rgba(61, 214, 140, 0);
  --color-mega-row-hover:  rgba(61, 214, 140, .12);
  --color-link:            #3dd68c;
  /* Near-black rather than white: this accent is light enough that white lands
     at 1.9:1 on it. Overridden per-buyer by doku_accent_css(). */
  --color-on-accent:       #0d0d0d;

  /* Tags / badges */
  --color-tag-bg:          #161616;
  --color-tag-text:        #3dd68c;

  /* Sidebar */
  --color-sidebar-active:       rgba(61, 214, 140, .15);
  --color-sidebar-active-text:  #3dd68c;

  /* Search */
  --color-search-bg:       #111;

  /* Breadcrumb */
  --color-breadcrumb:      #888;

  /* Keyboard shortcut */
  --color-kbd-bg:          #1a1a1a;
  --color-kbd-border:      #2a2a2a;
  --color-mark-bg:         #4a3a14;

  /* Scrollbar */
  --color-scrollbar:       #1e1e1e;

  /* Heavier and wider than light's, because the ground is already near-black:
     at .12 the halo is indistinguishable from the page. At .7 it composites to
     roughly #040404 against a #0d0d0d page and a #101010 panel, so the panel
     reads as lifted rather than relying on its hairline alone. */
  --shadow-panel:          0 4px 20px rgba(0, 0, 0, .7);
  --shadow-overlay:        0 10px 40px rgba(0, 0, 0, .8);
  --shadow-drawer:         8px 0 40px rgba(0, 0, 0, .85);
  --shadow-drawer-end:     -8px 0 40px rgba(0, 0, 0, .85);

  /* Helpfulness rating — idle thumb, 3.4:1 as a UI component */
  --color-vote-idle:       #666;

  /* Diff markers — the vivid pair, which needs the dark code ground */
  --color-diff-add:        #3dd68c;
  --color-diff-add-bg:     rgba(61, 214, 140, .10);
  --color-diff-del:        #f87171;
  --color-diff-del-bg:     rgba(248, 113, 113, .10);

  --color-param-type:      #ffcb6b;

  /* Shiki dual-theme: activate dark token colors */
  --shiki-dark-bg: var(--color-bg-code);
}

[data-theme="dark"] .shiki span {
  color: var(--shiki-dark) !important;
}

/* github-dark's comment color is 3.0:1 on its own #24292e ground; this is
   4.8:1. Stored highlights keep the original, so it is remapped here. */
[data-theme="dark"] .shiki span[style*="--shiki-dark:#6A737D" i] {
  color: #8b949e !important;
}

[data-theme="dark"] .shiki {
  background-color: var(--shiki-dark-bg) !important;
}

/* A native dropdown's arrow and open list follow color-scheme, not the colors
   main.css gives the closed field. */
[data-theme="dark"] select { color-scheme: dark; }
/* The same holds for the native audio and video controls. */
[data-theme="dark"] :is(audio, video) { color-scheme: dark; }

[data-theme="dark"] {
  /* Callouts */
  --color-note:            rgba(61, 214, 140, .08);
  --color-note-border:     rgba(61, 214, 140, .3);
  --color-tip:             rgba(16, 185, 129, .10);
  --color-tip-border:      rgba(16, 185, 129, .4);
  --color-warning:         rgba(255, 183, 76, .08);
  --color-warning-border:  rgba(255, 183, 76, .3);
  --color-danger:          rgba(239, 68, 68, .10);
  --color-danger-border:   rgba(239, 68, 68, .4);
  --color-info:            rgba(99, 102, 241, .10);
  --color-info-border:     rgba(99, 102, 241, .4);

  /* Callout titles — vivid shades clear 4.5:1 on #0d0d0d; light mode needs
     darker equivalents (see main.css). */
  --color-tip-text:        #34d399;
  --color-warning-text:    #ffb74c;
  --color-danger-text:     #f87171;
  --color-info-text:       #818cf8;
}