/*
 * Dharma Echo design tokens — from the Claude Design canvas (Brand & Motion boards).
 * Paper = light, Dusk = dark, Hall = projector. Contrast ratios are against --bg.
 *
 * v2 (operator window + History): new tokens are marked NEW. Dark/light can now also be forced
 * on any element with data-theme="dark" | "light" (History preview, design boards).
 * v3 (reader activity): new tokens are marked NEW v3.
 */
:root, [data-theme="light"] {
  /* Paper (light) */
  --bg: #F5EFE3;
  --bg-clear: rgba(245, 239, 227, 0);
  --surface: #FBF7EF;
  --ink: #2B231D;        /* live paragraph · 13.9:1 */
  --ink-soft: #5E5146;   /* earlier paragraphs · 7.0:1 */
  --muted: #6E6054;      /* UI text, Tibetan marker · 5.4:1 */
  --line: #DCD0BC;
  --accent: #7A2E2A;     /* maroon */
  --on-accent: #FBF7EF;
  --live: #B5701F;       /* saffron — breathing dot only */
  --scrim: rgba(14, 11, 9, 0.32);
  --shadow: 0 6px 24px rgba(43, 35, 29, 0.18);

  /* NEW — operator window + History */
  --field: #FFFDF8;                          /* text fields, pop-up menus */
  --hover: rgba(43, 35, 29, 0.05);           /* row / quiet-button hover */
  --selected: rgba(122, 46, 42, 0.11);       /* selected list rows */
  --highlight: rgba(181, 112, 31, 0.20);     /* sentence being played */
  --warn: #8A5410;                           /* problems the operator must look at · 5.4:1 */
  --warn-wash: rgba(181, 112, 31, 0.12);     /* problem band behind --warn text */
  --danger: #A33A22;                         /* Stop, Move to Trash · 5.7:1 */
  --danger-wash: rgba(163, 58, 34, 0.09);
  --meter-off: #E6DCCB;                      /* unlit meter segment */
  --meter-sound: #A99A87;                    /* sound that is not speech */
  --meter-voice: #B5701F;                    /* speech (= --live) */
  --meter-clip: #A33A22;                     /* last 3 segments when too loud (= --danger) */
  --window-shadow: 0 0 0 0.5px rgba(43, 35, 29, 0.22), 0 22px 60px rgba(43, 35, 29, 0.22);

  /* NEW v3 — activity at the live end (activity.css) */
  --ink-ghost: #6E6054;                      /* ink runs: the places of the coming words (= --muted), drawn at .32 → .72 */
  --ink-stroke: max(1.5px, .07em);           /* stroke on the baseline: 1.7px at 24px, 2.4px at 34px */

  /* Type */
  --serif: "Noto Serif", "PT Serif", Georgia, serif;
  --serif-sc: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "Noto Serif", serif;
  --sans: "Noto Sans", -apple-system, "Segoe UI", sans-serif;
  --sans-mac: -apple-system, "SF Pro Text", "Noto Sans", sans-serif;   /* NEW — native controls */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;                   /* NEW — addresses, paths */
  --size: 24px;          /* reader text, 16–44 */
  --lh: 1.6;             /* ru / en; vi 1.75; zh 1.8 (set per language below) */
  --para-gap: 0.9em;
  --measure: 40rem;      /* ~65 ch at large sizes */
  --history-size: 20px;  /* NEW — History reading text */

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-piece: 600ms;      /* new text: opacity only */
  --t-soften: 1200ms;    /* paragraph ink → ink-soft */
  --t-ui: 400ms;         /* header tuck, pill, banner */
  --t-breath: 3.6s;      /* breathing dot loop */
  --t-meter: 120ms;      /* NEW — meter rise; fall is −4 dB per update */
  --t-follow: 700ms;     /* NEW — History glide to the sentence being played */
  --t-dip: 240ms;        /* NEW v3 — the live end gives way before new text (ease-in) */
  --t-ink-fill: 900ms;   /* NEW v3 — one stroke inks in as the translation progresses */
  --t-word: 320ms;       /* NEW v3 — a streamed word fades in */
  --t-tib: 6s;           /* NEW v3 — Tibetan ring breath; late runs breathe this slowly when slow */
  --t-rule: 8s;          /* NEW v3 — forming marker rules grow outward */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16110E; --bg-clear: rgba(22, 17, 14, 0); --surface: #2A211B;
    --ink: #EDE3D3; --ink-soft: #B3A694; --muted: #9A8C7B; --line: #3A2F27;
    --accent: #D9A05B; --on-accent: #16110E; --live: #D9A05B;
    --scrim: rgba(0, 0, 0, 0.5); --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    --field: #211A15; --hover: rgba(237, 227, 211, 0.06); --selected: rgba(217, 160, 91, 0.16);
    --highlight: rgba(217, 160, 91, 0.24); --warn: #E2A85E; --warn-wash: rgba(217, 160, 91, 0.13);
    --danger: #E8836A; --danger-wash: rgba(232, 131, 106, 0.12);
    --meter-off: #342922; --meter-sound: #7D6F60; --meter-voice: #D9A05B; --meter-clip: #E8836A;
    --window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(237, 227, 211, 0.06) inset, 0 22px 60px rgba(0, 0, 0, 0.5);
    --ink-ghost: #9A8C7B;
  }
}
[data-theme="dark"] {
  --bg: #16110E; --bg-clear: rgba(22, 17, 14, 0); --surface: #2A211B;
  --ink: #EDE3D3; --ink-soft: #B3A694; --muted: #9A8C7B; --line: #3A2F27;
  --accent: #D9A05B; --on-accent: #16110E; --live: #D9A05B;
  --scrim: rgba(0, 0, 0, 0.5); --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  --field: #211A15; --hover: rgba(237, 227, 211, 0.06); --selected: rgba(217, 160, 91, 0.16);
  --highlight: rgba(217, 160, 91, 0.24); --warn: #E2A85E; --warn-wash: rgba(217, 160, 91, 0.13);
  --danger: #E8836A; --danger-wash: rgba(232, 131, 106, 0.12);
  --meter-off: #342922; --meter-sound: #7D6F60; --meter-voice: #D9A05B; --meter-clip: #E8836A;
  --window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(237, 227, 211, 0.06) inset, 0 22px 60px rgba(0, 0, 0, 0.5);
  --ink-ghost: #9A8C7B;  /* NEW v3 (= --muted) */
}

/* Hall (projector) — always this theme */
.hall {
  --ink-ghost: #A79A88; --t-dip: 400ms; --t-ink-fill: 1400ms; --t-rule: 12s;   /* NEW v3 — slower, for the room */
  --bg: #0E0B09; --bg-clear: rgba(14, 11, 9, 0); --surface: rgba(42, 33, 27, 0.85);
  --ink: #FFF8EC; --ink-soft: #CFC3B0; --muted: #A79A88; --line: #3A2F27;
  --accent: #E2A85E; --on-accent: #0E0B09; --live: #E2A85E;
}

:lang(vi) { --lh: 1.75; }
:lang(zh) { --lh: 1.8; }