/* css/themes.css — Braun redesign theme overrides (v3.0).
   Light = "Braun white-clock": warm-white dial, near-black ink, hairline borders, flat.
   Hi-contrast = pure black/white, amber accent retained.
   Applied via applyTheme() body classes (body.theme-light / body.theme-hc).
   Overrides only the NEW token names — legacy aliases in tokens.css cascade through.
   Authoritative values: design_handoff_show_clock/rd-styles.css. */

/* ── Light theme ──────────────────────────────────────────── */
body.theme-light {
  --bg:         #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f4f3ee;
  --surface-3:  #edece6;
  --fg:         #1a1a16;
  --muted:      #6c6b62;
  /* Review P4: #a4a298 was ≈2.6:1 on white — below 4.5:1 for the functional
     small text that uses it. #767468 ≈ 4.7:1 on white. */
  /* AUD-F24: #767468 was validated on WHITE (4.7:1) but sheet labels sit on
     --surface-2 #f4f3ee where it fell to 4.23:1. #67655a = 5.27:1 there. */
  --faint:      #67655a;
  --amber:      #eebe37;
  --amber-soft: #6f5300;
  --green:      #4f8a1f;
  --blue:       #566f93;
  --error:      #cc3a36;
  /* Signal orange, light variant (user pick 2026-07-10): vivid orange instead of
     the brown-ish #b3760a; ~3.5:1 on white — fine for the large clock/ring, and
     small warning text always sits on a tinted surface, not bare white. */
  --warning:    #d96708;
  --line:       #e4e2d9;
  /* AUD-F25: #d2cfc4 was 1.56:1 vs white — #8f8c80 = 3.37:1 (full 1.4.11 pass;
     light mode is the daylight theme, where component boundaries matter most). */
  --line-2:     #8f8c80;
  --live:       var(--amber);

  /* AUD-D ink tokens — light values, each validated ≥4.5:1 on its real surface:
     amber-ink 7.21:1 on white (raw --amber was 1.74:1 — active tab label, NEXT
     chip, viewer Now/Next keys were near-invisible in daylight); pill inks
     ON 4.79 / LATE 5.44 / AHEAD 5.34 on their tints; warning-ink 5.18 on the
     stale-banner tint. */
  --amber-ink:   #6f5300;
  --ok-ink:      #43761a;
  --late-ink:    #b02c28;
  --ahead-ink:   #4a6285;
  --warning-ink: #8a5a09;
}

/* soften the dark dropdown/sheet shadows on white so it stays flat + precise */
body.theme-light .rd__menu,
body.theme-light .tt-switch,
body.theme-light .sheet__card,
body.theme-light .cl-wx__pop,
body.theme-light .rd-reopen {
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.22);
}
/* explicit light-mode slot surfaces: var(--surface) wasn't repainting on theme toggle */
body.theme-light .slot { background: #ffffff; }
body.theme-light .slot.is-live { background: #fcf3d6; }
/* trash icon: black in light mode (accent --amber in dark; see rundown.css) */
body.theme-light .tt-switch__del { color: #111111; }
body.theme-light .tt-switch__del:hover { color: var(--error); }

/* ── Legacy-alias re-resolution (light + hi-contrast) ─────────
   The legacy aliases (--accent-amber, --text-primary, --bg-surface, …) are
   declared on :root in tokens.css as `var(--newtoken)`. Custom-property var()
   substitution happens at the DECLARING element, so they resolve against the
   DARK :root values and inherit downward UNCHANGED — body.theme-* overrides
   only the NEW token names, never the aliases. Result: every module still
   written against a legacy alias stayed dark-themed in light/hi-contrast mode
   (e.g. the offset banner, slot/timetable modals, switcher, changelog).
   Re-declaring the alias block here (themes layer, per-theme scope) makes each
   var() re-resolve against the active theme's tokens. The default dark theme
   keeps the :root definitions and is unaffected. */
body.theme-light,
body.theme-hc {
  --bg-primary:        var(--bg);
  --bg-surface:        var(--surface);
  --bg-surface-2:      var(--surface-2);
  --bg-surface-3:      var(--surface-3);
  --text-primary:      var(--fg);
  --text-muted:        var(--muted);
  --text-faint:        var(--faint);
  --accent-amber:      var(--amber);
  --accent-amber-soft: var(--amber-soft);
  --accent-teal:       var(--blue);
  --accent-blue:       var(--blue);
  --accent-green:      var(--green);
  --clock-warning:     var(--warning);
  --clock-alert:       var(--error);
  --clock-positive:    var(--green);
  --color-success:     var(--green);
  --color-warning:     var(--warning);
  --color-error:       var(--error);
  --border-subtle:     var(--line);
  --border-strong:     var(--line-2);
  --accent-color:      var(--amber);
  --bg-base:           var(--bg);
  --bg-panel:          var(--surface);
  --text-secondary:    var(--muted);
}

/* ── Hi-contrast theme ────────────────────────────────────── */
body.theme-hc {
  --bg:        #000000;
  --surface:   #000000;
  --surface-2: #0a0a0a;
  --fg:        #ffffff;
  --muted:     #dddddd;
  --faint:     #aaaaaa;
  --line:      #444444;
  --line-2:    #666666;
  --live:      var(--amber);
}