/* ============================================================================
   theme.css — Oyang Archive
   Premium dark mode (token-driven) + light-mode micro-interaction layer.

   Why classes, not [style*="#hex"]
   --------------------------------
   The page is authored with ~4,200 inline style="" declarations reusing a
   small, consistent palette. Matching those hexes directly is fragile: the
   site's runtime animates reveals/hovers by touching el.style.*, which makes
   the browser reserialize the whole style attribute (#ffffff -> rgb(255,255,
   255)), so any [style*="#hex"] selector silently stops matching. Instead,
   theme.js reads each element's *computed* inline colour (always normalised to
   rgb) once and tags it with a semantic class (.oa-bg-*, .oa-fg-*, .oa-bd-*).
   Classes are immune to style-attribute reserialisation. Light mode is
   untouched (rules only fire under html[data-theme="dark"]); the whole layer
   is fully reversible.

   Dark palette is a warm, deep charcoal — never flat #000. Body copy clears
   WCAG AAA, muted tones clear AA, accents are lifted to stay legible on dark.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
  --color-bg:        #f6f5f2;
  --color-surface:   #ffffff;
  --color-text:      #14110f;
  --color-text-2:    #4b4540;
  --color-muted:     #7a736b;
  --color-border:    #e4e0d8;
  --color-accent:    #9e2b25;
  --color-accent-2:  #b23a33;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.16, 1, .3, 1);
  --dur:      .28s;

  --focus-ring: 0 0 0 3px rgba(158, 43, 37, .32);
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Grounds */
  --d-bg:        #17130f;
  --d-bg-2:      #1b1712;
  --d-surface:   #211c17;
  --d-surface-2: #272119;
  --d-surface-3: #2e2820;
  --d-panel:     #1e1a15;

  /* Lines */
  --d-border:        #35302a;
  --d-border-strong: #453f36;

  /* Ink — AAA / AA on --d-bg */
  --d-text:   #ece6dc;
  --d-text-2: #cbc3b6;
  --d-text-3: #a49a8c;
  --d-text-4: #857b6e;

  /* Accents (lifted for dark ground) */
  --d-accent:        #e46a60;
  --d-accent-strong: #d1483f;
  --d-wen:  #8aa8d6;
  --d-xiu:  #5fb27b;
  --d-yu:   #b98ccb;
  --d-info: #8fb2f0;
  --d-good: #5cc994;

  --focus-ring: 0 0 0 3px rgba(228, 106, 96, .40);

  background: var(--d-bg);
}
html[data-theme="dark"] body { background: var(--d-bg); }

/* ---------------------------------------------------------------------------
   2–4. DARK MODE recolour — semantic classes assigned by theme.js
   --------------------------------------------------------------------------- */

/* backgrounds */
html[data-theme="dark"] .oa-bg-bg    { background-color: var(--d-bg) !important; }
html[data-theme="dark"] .oa-bg-surf  { background-color: var(--d-surface) !important; }
html[data-theme="dark"] .oa-bg-surf2 { background-color: var(--d-surface-2) !important; }
html[data-theme="dark"] .oa-bg-surf3 { background-color: var(--d-surface-3) !important; }
html[data-theme="dark"] .oa-bg-panel { background-color: var(--d-panel) !important; }
html[data-theme="dark"] .oa-bg-nav   { background-color: rgba(23, 19, 15, .82) !important; }

/* text */
html[data-theme="dark"] .oa-fg-t1   { color: var(--d-text) !important; }
html[data-theme="dark"] .oa-fg-t2   { color: var(--d-text-2) !important; }
html[data-theme="dark"] .oa-fg-t3   { color: var(--d-text-3) !important; }
html[data-theme="dark"] .oa-fg-t4   { color: var(--d-text-4) !important; }
html[data-theme="dark"] .oa-fg-acc  { color: var(--d-accent) !important; }
html[data-theme="dark"] .oa-fg-wen  { color: var(--d-wen) !important; }
html[data-theme="dark"] .oa-fg-xiu  { color: var(--d-xiu) !important; }
html[data-theme="dark"] .oa-fg-yu   { color: var(--d-yu) !important; }
html[data-theme="dark"] .oa-fg-info { color: var(--d-info) !important; }
html[data-theme="dark"] .oa-fg-good { color: var(--d-good) !important; }

/* borders (border-color only → harmless on borderless sides) */
html[data-theme="dark"] .oa-bd-bd  { border-color: var(--d-border) !important; }
html[data-theme="dark"] .oa-bd-bds { border-color: var(--d-border-strong) !important; }
html[data-theme="dark"] .oa-bd-acc { border-color: var(--d-accent-strong) !important; }

/* fixed chrome not driven by inline styles */
html[data-theme="dark"] #readingProgress { background: var(--d-accent) !important; }
html[data-theme="dark"] ::selection { background: var(--d-accent-strong); color: #fff; }

/* ---------------------------------------------------------------------------
   5. DARK MODE — Proverbs view (already CSS-variable driven → redefine tokens)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] #view-yu {
  --yu-body: var(--d-text-2);
  --yu-card: var(--d-surface);
  --yu-deep: #c79ad6;
  --yu-ink:  var(--d-text);
  --yu-line: var(--d-border);
  --yu-mid:  #b78ac9;
  --yu-mut:  var(--d-text-3);
  --yu-pale: #6f4c82;
  --yu-soft: #241d2a;
  /* genre-tag chip + status tint grounds (were light) */
  --yu-soft2: #2a2230;
  --sec-bg:  #1c2a22; --sec-line:  #2f4638;
  --late-bg: #2b2618; --late-line: #463f28;
  --uns-bg:  #2c221c; --uns-line:  #463628;
  --oral-bg: #1f242a; --oral-line: #313c46;
}
html[data-theme="dark"] #view-yu .yu-front  { background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-surface-2) 100%) !important; }
html[data-theme="dark"] #view-yu .yu-back   { background: linear-gradient(180deg, #241d2a 0%, #2a2130 100%) !important; }
html[data-theme="dark"] #view-yu .yu-btn-solid,
html[data-theme="dark"] #view-yu .yu-chip.on { color: #fff !important; }
html[data-theme="dark"] #view-yu .yu-btn-solid       { background: #6f4c82 !important; border-color: #6f4c82 !important; }
html[data-theme="dark"] #view-yu .yu-btn-solid:hover { background: #7a528c !important; }
html[data-theme="dark"] #view-yu .yu-callout-text    { color: #e6d6ef !important; }
html[data-theme="dark"] #view-yu .yu-callout-text em { color: #d9b9ea !important; }

/* Hardcoded light surfaces in yu.css that the token remap doesn't reach.
   background-color (not shorthand) so gradients/arrows/borders survive. */
html[data-theme="dark"] #view-yu .yu-hero {
  background: linear-gradient(180deg, var(--d-bg-2) 0%, var(--d-bg) 100%) !important;
}
html[data-theme="dark"] #view-yu .yu-controls {
  background: rgba(23, 19, 15, .92) !important;
}
html[data-theme="dark"] #view-yu .yu-search,
html[data-theme="dark"] #view-yu .yu-btn,
html[data-theme="dark"] #view-yu .yu-chip,
html[data-theme="dark"] #view-yu .yu-select,
html[data-theme="dark"] #view-yu .yu-slchip,
html[data-theme="dark"] #view-yu .yu-xlink,
html[data-theme="dark"] #view-yu .yu-face,
html[data-theme="dark"] #view-yu .yu-dclose {
  background-color: var(--d-surface) !important;
}
html[data-theme="dark"] #view-yu .yu-drawer { background: var(--d-panel) !important; }
html[data-theme="dark"] #view-yu .yu-dhead {
  background: linear-gradient(180deg, var(--d-surface-2), var(--d-panel)) !important;
}

/* ---------------------------------------------------------------------------
   8. DARK MODE — Style detail drawer (#styleDrawer, styled by style.css with
   hardcoded light colours → not reachable by inline colour tagging)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] #styleDrawer #sd-origin,
html[data-theme="dark"] #styleDrawer #sd-desc p.dsub,
html[data-theme="dark"] #styleDrawer .acc-h { color: var(--d-text) !important; }
html[data-theme="dark"] #styleDrawer #sd-desc p,
html[data-theme="dark"] #styleDrawer #sd-desc li,
html[data-theme="dark"] #styleDrawer .acc-b p,
html[data-theme="dark"] #styleDrawer .acc-b li,
html[data-theme="dark"] #styleDrawer .rel a,
html[data-theme="dark"] #styleDrawer .src div { color: var(--d-text-2) !important; }
html[data-theme="dark"] #styleDrawer .sd-sec h3,
html[data-theme="dark"] #styleDrawer .acc-h .ar,
html[data-theme="dark"] #styleDrawer .rel a small,
html[data-theme="dark"] #styleDrawer #sd-photo { color: var(--d-text-3) !important; }
html[data-theme="dark"] #styleDrawer .acc-b a { color: var(--d-accent) !important; }
html[data-theme="dark"] #styleDrawer .acc-h,
html[data-theme="dark"] #styleDrawer .rel a { background: var(--d-surface) !important; }
html[data-theme="dark"] #styleDrawer .acc-h:hover { background: var(--d-surface-2) !important; }
html[data-theme="dark"] #styleDrawer .acc,
html[data-theme="dark"] #styleDrawer .acc-item + .acc-item,
html[data-theme="dark"] #styleDrawer .rel a,
html[data-theme="dark"] #styleDrawer .src div { border-color: var(--d-border) !important; }
html[data-theme="dark"] #styleDrawer .rel a:hover { border-color: var(--d-accent-strong) !important; }
html[data-theme="dark"] #styleDrawer .acc-item.open .acc-h { color: var(--d-accent) !important; }

/* ============================================================================
   6. PREMIUM INTERACTION LAYER  (applies in BOTH themes)
   Additive polish — never changes layout geometry.
   ============================================================================ */

a, button, [onclick], [role="button"],
[data-hover], [data-term], [data-gloss] {
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

a:focus-visible, button:focus-visible,
[onclick]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: 6px;
}

button:not([data-mobile-toggle]):active,
a:active { transform: translateY(.5px); }

/* --- Home & companion cards: elegant lift ------------------------------- */
#view-home button[data-hover*="translateY"] {
  transition:
    transform .34s var(--ease-out),
    box-shadow .34s var(--ease-out),
    border-color .34s var(--ease-out);
  will-change: transform;
}
#view-home button[data-hover*="translateY"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -22px rgba(20, 17, 15, .45);
}
html[data-theme="dark"] #view-home button[data-hover*="translateY"]:hover {
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .72);
}
#view-home button[data-hover*="translateY"] span[style*="Noto Serif TC"]:first-child {
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
#view-home button[data-hover*="translateY"]:hover span[style*="Noto Serif TC"]:first-child {
  transform: translateY(-4px) scale(1.03);
}

/* --- Primary call-to-action (cinnabar) ---------------------------------- */
#view-home button[onclick*="series"]:hover {
  box-shadow: 0 14px 30px -12px rgba(158, 43, 37, .55);
  transform: translateY(-2px);
}

/* --- Typography refinement ---------------------------------------------- */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
[style*="Noto Serif TC"], [style*="Noto Serif TC"] * { font-feature-settings: "palt" 1; }
h1[style*="Spectral"], h2[style*="Spectral"] { letter-spacing: -.012em; }

/* --- Scroll-reveal (home only; driven by theme.js) ---------------------- */
.tj-reveal { opacity: 0; transform: translateY(20px); }
.tj-in     { opacity: 1; transform: none;
             transition: opacity .7s var(--ease-io), transform .7s var(--ease-io); }
@media (prefers-reduced-motion: reduce) {
  .tj-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   7. Theme toggle control (injected by theme.js)
   ============================================================================ */
.theme-toggle {
  --sz: 38px;
  position: relative;
  width: var(--sz); height: var(--sz);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-2);
  flex: 0 0 auto;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
html[data-theme="dark"] .theme-toggle {
  border-color: var(--d-border-strong) !important;
  color: var(--d-text-3) !important;
  background: transparent !important;
}
html[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--d-accent) !important;
  color: var(--d-accent) !important;
  background: rgba(228, 106, 96, .08) !important;
}
.theme-toggle svg {
  width: 18px; height: 18px;
  position: absolute;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
/* Three-state icon: the visible glyph reflects the chosen MODE
   (light = sun, dark = moon, auto = monitor), set via [data-mode] by theme.js. */
.theme-toggle .ic-sun,
.theme-toggle .ic-moon,
.theme-toggle .ic-auto { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle[data-mode="light"] .ic-sun,
.theme-toggle[data-mode="dark"]  .ic-moon,
.theme-toggle[data-mode="auto"]  .ic-auto { opacity: 1; transform: rotate(0) scale(1); }
/* Fallback before [data-mode] is set: show moon in light, sun in dark. */
.theme-toggle:not([data-mode]) .ic-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle:not([data-mode]) .ic-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="dark"] .theme-toggle:not([data-mode]) .ic-sun  { opacity: 1; transform: rotate(0) scale(1); }

.theme-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px; margin-top: 4px;
  border-top: 1px solid var(--color-border);
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--color-text-2);
}
html[data-theme="dark"] .theme-toggle-row { border-top-color: var(--d-border) !important; color: var(--d-text-3) !important; }

.oa-freecue {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--color-muted);
}
.oa-freecue .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
html[data-theme="dark"] .oa-freecue { color: var(--d-text-3) !important; }