/* ============================================================
   hybrid-tokens-dark.css — VSITS dark-mode companion
   ------------------------------------------------------------
   Companion stylesheet to hybrid-tokens.css. Defines dark
   palette + readings-band tokens + theme transitions.

   Strategy:
   - Light values stay on :root (in hybrid-tokens.css) as the
     baseline. This file ADDS dark values keyed by [data-theme].
   - [data-theme="dark"]  → always dark
   - [data-theme="auto"]  → tracks prefers-color-scheme
   - [data-theme="light"] → explicit light (overrides :root in
     case anyone ever swaps the default)
   - No data-theme attribute = falls back to :root = light.

   Loaded AFTER hybrid-tokens.css so cascade order is correct.
   ============================================================ */

/* ---- Readings-band tokens (LIGHT defaults).
        These are referenced by main.css after the
        rgba(255,255,255,…) → token conversion. */
:root {
  --readings-bg:    var(--ink);
  --readings-fg:    var(--paper);
  --readings-rule:  oklch(1 0 0 / 0.18);
  --readings-rule-soft: oklch(1 0 0 / 0.10);
  --readings-meta:  oklch(1 0 0 / 0.55);
  --readings-desc:  oklch(1 0 0 / 0.65);
  --readings-ts:    oklch(1 0 0 / 0.50);
}

/* ---- DARK ------------------------------------------------ */
[data-theme="dark"] {
  /* "Paper" → warm charcoal. Hue 85 (warm) preserved for brand continuity. */
  --paper:        oklch(0.18 0.008 85);   /* page background */
  --paper-2:      oklch(0.22 0.010 85);   /* inset cards, sidebars */
  --paper-3:      oklch(0.26 0.012 85);   /* hover, masthead strip */
  --paper-rule:   oklch(0.32 0.012 85);   /* hairlines */
  --paper-rule-2: oklch(0.40 0.015 85);   /* stronger rules */

  /* "Ink" → paper-warm whites */
  --ink:          oklch(0.95 0.008 85);
  --ink-2:        oklch(0.78 0.010 85);
  --ink-3:        oklch(0.62 0.010 85);
  --ink-4:        oklch(0.48 0.008 85);

  /* Copper retuned lighter for contrast on dark.
     L 0.55 → 0.74 keeps the same hue family but breathes. */
  --copper:       oklch(0.74 0.14 50);
  --copper-2:     oklch(0.82 0.13 50);    /* hover lifts brighter */
  --copper-soft:  oklch(0.30 0.06 50);    /* subscribe band fill */

  --data-pos:     oklch(0.78 0.14 145);
  --data-neg:     oklch(0.72 0.18 25);

  /* Readings band — goes one notch DARKER than the page so it
     still reads as "the instrumented strip" instead of vanishing. */
  --readings-bg:        oklch(0.12 0.008 85);
  --readings-fg:        oklch(0.95 0.008 85);
  --readings-rule:      oklch(1 0 0 / 0.12);
  --readings-rule-soft: oklch(1 0 0 / 0.07);
  --readings-meta:      oklch(1 0 0 / 0.50);
  --readings-desc:      oklch(1 0 0 / 0.55);
  --readings-ts:        oklch(1 0 0 / 0.40);

  color-scheme: dark;
}

/* ---- AUTO — follow system when data-theme="auto" --------- */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --paper:        oklch(0.18 0.008 85);
    --paper-2:      oklch(0.22 0.010 85);
    --paper-3:      oklch(0.26 0.012 85);
    --paper-rule:   oklch(0.32 0.012 85);
    --paper-rule-2: oklch(0.40 0.015 85);

    --ink:          oklch(0.95 0.008 85);
    --ink-2:        oklch(0.78 0.010 85);
    --ink-3:        oklch(0.62 0.010 85);
    --ink-4:        oklch(0.48 0.008 85);

    --copper:       oklch(0.74 0.14 50);
    --copper-2:     oklch(0.82 0.13 50);
    --copper-soft:  oklch(0.30 0.06 50);

    --data-pos:     oklch(0.78 0.14 145);
    --data-neg:     oklch(0.72 0.18 25);

    --readings-bg:        oklch(0.12 0.008 85);
    --readings-fg:        oklch(0.95 0.008 85);
    --readings-rule:      oklch(1 0 0 / 0.12);
    --readings-rule-soft: oklch(1 0 0 / 0.07);
    --readings-meta:      oklch(1 0 0 / 0.50);
    --readings-desc:      oklch(1 0 0 / 0.55);
    --readings-ts:        oklch(1 0 0 / 0.40);

    color-scheme: dark;
  }
}

/* ---- Theme-switch transitions ---------------------------- */
/* Only animate the 4 properties that visibly change during a
   theme toggle. Avoid `transition: all` — it would animate every
   layout property on every element on the page, which causes
   jank during scrolling on long article pages. */
html, body, .site-header, .masthead-strip, .live-readings,
.subscribe-section, .article-next, .site-footer, .post-row,
.dispatch-card, .hero-stat-sidebar, .services-sticky-card,
.contact-email-address, .post-tag, .post-nav-item, .btn,
.share-btn, .update-callout, .post-content pre, .post-content code,
.theme-toggle, .theme-toggle button, .stat-cell, .citation-item {
  transition:
    background-color .25s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease;
}

/* Disable transitions during the very first paint after a
   data-theme change, to avoid double-animating during initial
   page load. The class is added briefly by the inline init
   script in header.php and removed on next frame. */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}