/* Saria shared theme. Light values live in each page's own :root.
   Dark overrides are applied via <html data-theme="dark">, set by theme.js. */

:root { --sage-hover: #325a4d; --red-tint: #F3D9D9; --on-overlay: rgba(26,24,20,0.5); --loading-bg: rgba(247,244,239,0.92); --dom-situation: #6B6456; --dom-situation-bg: #F1EFE9; --dom-thought: #2F5D8A; --dom-thought-bg: #EAF1F7; --dom-body: #3F7A5C; --dom-body-bg: #EBF3EE; --dom-action: #B0701F; --dom-action-bg: #F9F0E2; --dom-emotion: #A3365F; --dom-emotion-bg: #F8ECF1; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECE8E1; --ink-mid: #C4BFB6; --ink-soft: #9A958D; --ink-faint: #6E6A63;
  --paper: #151412; --paper-warm: #22201C; --paper-card: #1C1B18;
  --sage: #4E8C77; --sage-light: #1F2D28; --sage-mid: #6FB39B; --sage-hover: #5A9C85;
  --amber: #D9A04E; --amber-light: #2C2418;
  --red: #D65F5F; --red-light: #2E1D1D; --red-tint: #3A2222;
  --border: #36332E; --border-soft: #292723;
  --shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06);
  --on-overlay: rgba(0,0,0,0.65); --loading-bg: rgba(21,20,18,0.92);
  --dom-situation: #BDB5A5; --dom-situation-bg: #2A2823;
  --dom-thought: #7FB0DE; --dom-thought-bg: #1D2A38;
  --dom-body: #7CC29E; --dom-body-bg: #1C2D25;
  --dom-action: #E0A55A; --dom-action-bg: #33281A;
  --dom-emotion: #E07FA3; --dom-emotion-bg: #3A1F2C;
}

:root[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] svg [stroke="#3D6B5C"] { stroke: var(--sage-mid); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color-scheme: dark; }
:root[data-theme="dark"] ::placeholder { color: var(--ink-faint); opacity: 1; }
:root[data-theme="dark"] ::selection { background: rgba(111,179,155,0.35); }

/* Toggle button, fixed bottom-left on every page */
.saria-theme-toggle {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 9999;
  width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-card); color: var(--ink-mid);
  border: 0.5px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  cursor: pointer; opacity: 0.85; transition: opacity .15s ease, transform .15s ease;
}
.saria-theme-toggle:hover { opacity: 1; transform: scale(1.06); }
.saria-theme-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.saria-theme-toggle svg { width: 18px; height: 18px; display: block; }
.saria-theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .saria-theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .saria-theme-toggle .ico-moon { display: none; }
@media print { .saria-theme-toggle { display: none; } }

/* Dark: typed text a step softer than --ink so it isn't glaring on the dark field */
:root { --input-text: var(--ink); }
:root[data-theme="dark"] { --input-text: #BDB8AF; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color: var(--input-text); caret-color: var(--sage-mid); }
/* zero-specificity fallback so fields without their own background don't fall back to the browser's grey */
:where(:root[data-theme="dark"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]), textarea, select) { background-color: var(--paper-warm); }

:root { --amber-hover: #f5e8d0; }
:root[data-theme="dark"] { --amber-hover: #3A2E1C; }