/* ============================================================================
 * Synodos-MED+ · Design Tokens — single source of truth for the palette
 * ----------------------------------------------------------------------------
 * Loaded AFTER style.css (see app.html). This module OWNS the "calm companion"
 * palette and OVERRIDES the legacy --color-* tokens by mapping them onto the
 * new tokens — with zero mass-edits to the 176KB style.css monolith.
 *
 * Theme mechanism matches the app: light = :root, dark = body.dark-theme.
 * Because custom properties resolve lazily at the element that uses them,
 * mapping `--color-primary: var(--teal)` once works for BOTH themes — the
 * underlying --teal is what changes per theme. The mappings are repeated in
 * body.dark-theme so they win (by load order) over the legacy dark overrides.
 *
 * New tokens (--teal, --breath, --honey, --lav, --rose, --sos, --sm-*) are
 * exposed for the redesigned Home / Ανάσα / Πυλώνας-2 UI. Nothing consumes
 * them yet, so they are additive and safe.
 * ============================================================================ */

:root {
  /* ── New palette · LIGHT ─────────────────────────────────────────────── */
  --sm-bg: #e9efed;
  --sm-surface: #ffffff;
  --sm-surface-warm: #f7f3ec;
  --sm-ink: #15211e;
  --sm-ink-2: #46554f;
  --sm-muted: #6e7d77;
  --sm-line: #d7e1dd;

  --teal: #17756b;        --teal-deep: #0f5148;   --teal-bg: #dcecea;
  --breath: #4f9e91;      --breath-bg: #dfeee9;
  --honey: #b3782b;       --honey-bg: #f3e9d5;
  --lav: #7255c6;         --lav-bg: #ebe5f7;
  --rose: #cd7d6b;        --rose-bg: #f6e4de;
  --sos: #b3453f;         --sos-bg: #f4dcd9;

  /* ── Map legacy semantic tokens onto the new palette ─────────────────── */
  --color-bg: var(--sm-bg);
  --color-background-app: var(--sm-bg);
  --color-surface: var(--sm-surface);
  --color-surface-raised: var(--sm-surface);
  --color-surface-overlay: #eef3f2;
  --color-text-main: var(--sm-ink);
  --color-text-muted: var(--sm-muted);
  --color-border: var(--sm-line);
  --color-primary: var(--teal);
  --color-primary-light: var(--teal-bg);
  --color-accent: var(--lav);
  --color-accent-light: var(--lav-bg);
  --color-warm-accent: var(--honey);
  --color-warm-accent-light: var(--honey-bg);

  /* Refresh primary-tinted shadows to the new teal (23,117,107) */
  --shadow-glow-primary: 0 0 20px rgba(23, 117, 107, 0.15), 0 4px 12px rgba(23, 117, 107, 0.08);
  --shadow-primary: 0 8px 25px rgba(23, 117, 107, 0.25), 0 3px 8px rgba(23, 117, 107, 0.15);
}

body.dark-theme {
  /* ── New palette · DARK ──────────────────────────────────────────────── */
  --sm-bg: #0e1614;
  --sm-surface: #15211e;
  --sm-surface-warm: #1d2420;
  --sm-ink: #e9efec;
  --sm-ink-2: #aebbb6;
  --sm-muted: #7f918b;
  --sm-line: #253431;

  --teal: #4fc2b4;        --teal-deep: #74ded0;   --teal-bg: #142623;
  --breath: #79bcae;      --breath-bg: #14261f;
  --honey: #d7a45c;       --honey-bg: #2a2214;
  --lav: #b3a0ec;         --lav-bg: #1e1930;
  --rose: #e0917d;        --rose-bg: #2b1e1a;
  --sos: #e0796f;         --sos-bg: #2c1917;

  /* Re-map (wins over legacy body.dark-theme by load order) */
  --color-bg: var(--sm-bg);
  --color-background-app: var(--sm-bg);
  --color-surface: var(--sm-surface);
  --color-surface-raised: var(--sm-surface-warm);
  --color-surface-overlay: #1d2b28;
  --color-text-main: var(--sm-ink);
  --color-text-muted: var(--sm-muted);
  --color-border: var(--sm-line);
  --color-primary: var(--teal);
  --color-primary-light: var(--teal-bg);
  --color-accent: var(--lav);
  --color-accent-light: var(--lav-bg);
  --color-warm-accent: var(--honey);
  --color-warm-accent-light: var(--honey-bg);
}