/* =============================================================
   Warm adaptive theme — Direction D.
   One design language, two skins: a bright warm-light skin for
   daytime (Direction C) and a calm warm-dark skin for the evening
   (Direction A). theme.js flips the skin on London sunrise/sunset,
   with a manual override toggle in the nav.

   Every surface colour in the app is a variable defined here, so a
   page only needs to reference var(--...) and it themes for free.
   Dark is the default (:root); light overrides under [data-theme="light"].

   Pure CSS, no build step. Tune the whole app's palette from here.
   ============================================================= */

:root {
  /* calm warm dark (evening) */
  --bg:            #16150F;
  --text-primary:  #ECE8DF;
  --text-secondary:#97927F;
  --text-tertiary: #6F6B5C;
  --card:          rgba(255,255,255,0.035);
  --card-2:        rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.08);
  --border-soft:   rgba(255,255,255,0.055);
  --accent:        #C8795D;
  --accent-ink:    #34130A;
  --accent-soft:   rgba(200,121,93,0.15);
  --success:       #A6C0A8;
  --success-soft:  rgba(143,166,142,0.13);
  --warning:       #E0B36A;
  --danger:        #E08A8A;
  --shadow:        0 12px 40px rgba(0,0,0,0.45);
  --bar-bg:        #100F0A;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  /* daylight warm (daytime / office monitor) */
  --bg:            #F3F1EC;
  --text-primary:  #1F1B14;
  --text-secondary:#6B6356;
  --text-tertiary: #8A8170;
  --card:          #FFFFFF;
  --card-2:        #FBFAF6;
  --border:        rgba(0,0,0,0.09);
  --border-soft:   rgba(0,0,0,0.06);
  --accent:        #D85A30;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #FBE7DE;
  --success:       #0F6E56;
  --success-soft:  #E1F5EE;
  --warning:       #B07514;
  --danger:        #B23B3B;
  --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.05);
  --bar-bg:        #ECEAE3;
}

/* Theme-switch transition: only on bulk surfaces, kept short so it
   reads as a gentle dawn/dusk rather than a flash. */
body { transition: background-color .4s ease, color .4s ease; }

/* ---- Theme toggle button (injected into the nav by theme.js) ---- */
.lf-theme-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  width: 34px; height: 34px; padding: 0;
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.lf-theme-toggle:hover { color: var(--text-primary); border-color: var(--border-soft); }
.lf-theme-toggle svg { width: 17px; height: 17px; display: block; }
.lf-theme-toggle .lf-auto-dot {
  position: absolute; margin: -14px 0 0 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}