/* Clean black & white with old-world accents: emerald (primary), antique gold, deep burgundy, leather brown.
   Palette direction from the user's moodboard (Oct 2026); structure from sonder-studio/styles.css. */
:root {
  /* base, light (default): clean near-white paper, charcoal ink */
  --bg-1: #fbfaf8;
  --bg-2: #e6e2da;
  --surface: #f5f4f1;
  --ink: #101111;
  --ink-soft: #55585a;
  --ink-faint: #909394;
  --line: rgba(16, 17, 17, 0.12);
  --accent: #154230;
  --accent-ink: #154230;
  --glass: rgba(251, 250, 248, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 10px 30px rgba(16, 17, 17, 0.12);
  --viz-bg: #ebe9e4;

  /* supporting accents: details, data, illustration; never body text on paper */
  --gold: #a6824a;
  --gold-ink: #8a6a36;
  --burgundy: #5d1e21;
  --leather: #7a4b2a;
  --olive: #5f6b3a;

  /* status dots (work list) */
  --status-live: #2f7a55;
  --status-building: #a6824a;

  /* fixed brand values (do not flip with theme) */
  --brand-emerald: #154230;
  --brand-emerald-deep: #16302b;
  --brand-forest: #03110d;
  --brand-gold: #a6824a;
  --brand-sand: #a38560;
  --brand-burgundy: #5d1e21;
  --brand-oxblood: #390517;
  --brand-leather: #7a4b2a;
  --brand-cream: #e6e2da;
  --brand-paper: #f5f4f1;
  --brand-black: #101111;

  /* demo-kit palette: cooler greys, same emerald */
  --demo-bg: #eef1f2; --demo-surface: #f5f6f7; --demo-panel: rgba(255,255,255,.7);
  --demo-ink: #101111; --demo-ink-soft: #55595e; --demo-ink-faint: #8a8f94;
  --demo-accent: #154230; --demo-accent-ink: #103526;

  /* semantic aliases */
  --surface-page: var(--surface);
  --surface-raised: color-mix(in srgb, var(--bg-1) 55%, var(--surface));
  --surface-glass: var(--glass);
  --surface-inverse: var(--ink);
  --surface-accent: var(--brand-emerald);
  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --text-accent: var(--accent);
  --text-on-inverse: var(--surface);
  --border-subtle: var(--line);
  --border-strong: var(--ink-faint);
  --border-glass: var(--glass-edge);
  --focus-ring: var(--accent);
  --selection: color-mix(in srgb, var(--gold) 30%, transparent);
  --hero-gradient: radial-gradient(110% 85% at 50% 42%, var(--bg-1) 0%, var(--bg-2) 100%);
  color-scheme: light;
}
/* Dark theme: set data-theme="dark" on <html> (follow the OS by setting it from prefers-color-scheme before first paint, as sonder-studio/js/theme.js does). */
:root[data-theme="dark"] {
  --bg-1: #1a1c1b; --bg-2: #070808; --surface: #101111;
  --ink: #eeeeec; --ink-soft: #a3a6a4; --ink-faint: #6c706e; --line: rgba(238, 238, 236, 0.11);
  --accent: #74b394; --accent-ink: #74b394;
  --gold: #c9a66b; --gold-ink: #c9a66b; --burgundy: #b5585c; --leather: #b07c55; --olive: #a3ad78;
  --status-live: #74b394; --status-building: #c9a66b;
  --glass: rgba(26, 28, 27, 0.58); --glass-edge: rgba(238, 238, 236, 0.14);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --viz-bg: #161817;
  color-scheme: dark;
}
/* Demo surfaces (*.sondersoftware.com): wrap in data-surface="demo". */
[data-surface="demo"] {
  --bg-1: #eef1f2; --bg-2: #eef1f2; --surface: #f5f6f7; --glass: rgba(255,255,255,.7);
  --ink: #101111; --ink-soft: #55595e; --ink-faint: #8a8f94;
  --line: rgba(16,17,17,.1); --accent: #154230; --accent-ink: #103526;
  --card-shadow: 0 10px 30px rgba(16,24,22,.13);
  --radius: 18px;
}
:root[data-theme="dark"] [data-surface="demo"], [data-theme="dark"][data-surface="demo"] {
  --bg-1: #191c1d; --bg-2: #191c1d; --surface: #0e1011; --glass: rgba(26,30,31,.7);
  --ink: #eef0f0; --ink-soft: #9ea3a6; --ink-faint: #6b7073; --line: rgba(230,236,236,.1);
  --accent: #74b394; --accent-ink: #8fc5aa; --card-shadow: 0 10px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}