/* ============================================================
   SepiaLog website theme — "Clay" design system
   Light is the default; add data-theme="dark" on <html> to switch.
   Values mirror the live app tokens (brand/design-system), tuned
   for the marketing site so cards/boxes read clearly.

   Loaded AFTER each page's inline <style>, so it overrides the old
   dark-only :root. The site's existing variable names (--bg, --ink,
   --line, --accent, ...) are remapped to the Clay palettes here.
   ============================================================ */

/* ---------- Light (default) ---------- */
:root,
html[data-theme="light"] {
  --bg:            #faf6f1;
  --bg-2:          #ffffff;
  --bg-3:          #f3ece3;
  --surface:       #ffffff;
  --line:          #e0d3c0;   /* warm, clearly visible on cream */
  --line-strong:   #d2c2ab;
  --ink:           #2a2420;
  --ink-dim:       #6b5f53;
  --ink-faint:     #877a6b;
  --accent:        #c8643c;
  --accent-soft:   #f7e7dc;
  --accent-line:   rgba(200, 100, 60, 0.30);
  --ok:            #4a7d44;
}

/* ---------- Dark (toggle) ---------- */
html[data-theme="dark"] {
  --bg:            #191510;
  --bg-2:          #2a231b;
  --bg-3:          #322a21;
  --surface:       #262019;
  --line:          #473d31;   /* stronger so card edges are clearly visible */
  --line-strong:   #5c4f40;
  --ink:           #efe8df;
  --ink-dim:       #bdb3a6;
  --ink-faint:     #a89a89;
  --accent:        #e0875f;
  --accent-soft:   #3a2a20;
  --accent-line:   rgba(224, 135, 95, 0.34);
  --ok:            #7fae7a;
}

/* Lift the boxes off the background so they're easy to tell apart. */
.tier,
.card,
.dl,
.note,
.dl-note,
.firstrun {
  box-shadow: 0 1px 2px rgba(60, 40, 25, 0.05), 0 10px 26px -16px rgba(60, 40, 25, 0.18);
}
html[data-theme="dark"] .tier,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dl,
html[data-theme="dark"] .note,
html[data-theme="dark"] .dl-note,
html[data-theme="dark"] .firstrun {
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.85);
}

/* Softer frame/package shadows on the light theme (homepage). */
html[data-theme="light"] .frame,
html[data-theme="light"] .pkg,
html[data-theme="light"] .outcome-media .frame {
  box-shadow: 0 2px 4px rgba(60, 40, 25, 0.06), 0 18px 44px -22px rgba(60, 40, 25, 0.25);
}

/* Smooth the toggle (never animates initial load). */
html[data-theme] body,
html[data-theme] .tier,
html[data-theme] .card,
html[data-theme] .dl,
html[data-theme] .note,
html[data-theme] .dl-note,
html[data-theme] .firstrun,
html[data-theme] .beta-banner {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ---------- Theme toggle button (injected by consent.js) ---------- */
.sl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  flex: none;
  transition: color .2s, border-color .2s, background .2s;
}
.sl-theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}
.sl-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- Light-mode legibility fixes ---------- */
/* The hero animation is a dark graphic; its bottom "melt" gradient fades to
   the page colour, which looks like a white haze on the light theme. Drop it
   in light mode (it still melts nicely into the dark theme). */
html[data-theme="light"] .hero-media::after { display: none; }

/* Header nav links were tuned for the dark hero; darken them on the light
   theme so they read clearly on the cream background. */
html[data-theme="light"] .nav-links a.txt { color: #4a4138; }
html[data-theme="light"] .nav-links a.txt:hover { color: var(--accent); }
html[data-theme="light"] .lang-switch a:not(.active) { color: #6b5f52; }

/* Scrolled sticky header uses a dark translucent bar (built for the dark
   hero). On the light theme make it a cream bar so the dark nav text stays
   readable instead of disappearing. */
html[data-theme="light"] header.nav.scrolled {
  background: rgba(250, 246, 241, 0.85);
  border-bottom-color: var(--line);
}

/* Selection colour needs dark text on the light accent. */
html[data-theme="light"] ::selection { background: var(--accent); color: #fff8f2; }

/* Primary buttons: keep dark text on the coral in both themes. */
html[data-theme="light"] .btn-primary { color: #fff8f2; }
html[data-theme="light"] .btn-primary:hover { background: #b85834; }

/* ---------- Layout / legibility fixes ---------- */
/* Feature numbers (01/02/03) were too dark to read — make them clearly visible. */
.feat .num { color: var(--ink-dim); opacity: 1; }

/* "How it works" steps: the illustration sits below each step's heading+text.
   When text wraps to different heights (e.g. longer German strings), the boxes
   start at different y-positions. Bottom-align the illustrations so they line
   up across all three columns in every language. */
.how .step { display: flex; flex-direction: column; }
.how .step .step-anim { margin-top: auto; }
