/* One palette for the canvas, navigation and controls. Follow the OS unless
   preferences.js resolves an explicit light/dark choice before first paint. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f7f6f2, #17191d);
  --surface: light-dark(#fffefa, #202328);
  --soft: light-dark(#efede7, #2a2d33);
  --text: light-dark(#242a32, #f0efeb);
  --muted: light-dark(#626770, #b5b7bd);
  --line: light-dark(#dedbd3, #3c4047);
  --control-line: light-dark(#8d8b84, #777d87);
  --accent: light-dark(#303e50, #d3bea0);
  --on-accent: light-dark(#fffefa, #242321);
  --accent-hover: light-dark(#415269, #e0cdb0);
  --focus: light-dark(#426990, #a9c8e4);

  /* Existing component names share a restrained bronze accent. */
  --gold: light-dark(#927650, #c7ae87);
  --gold-dark: light-dark(#806443, #c7ae87);
  --heading-accent: light-dark(#6d665b, #c7baa6);
  --panel-shadow: 0 4px 22px light-dark(#242a3205, #0000001c);
  --welcome-glow: light-dark(#ded6c340, #6e65531f);
  --scrim: #10131899;

  --nav-bg: light-dark(#efede7, #1d2025);
  --nav-text: light-dark(#30353d, #e9e6df);
  --nav-muted: light-dark(#575e67, #afb3bb);
  --nav-line: light-dark(#d7d3ca, #393d44);
  --nav-hover: light-dark(#e8e4db, #292d34);
  --nav-active: light-dark(#e3ddd1, #34312c);
  --nav-accent: light-dark(#775d3e, #d0b58b);

  /* Chart hues describe time, independently of green/red gain/loss feedback. */
  --chart-before: light-dark(#566c85, #9eb3cc);
  --chart-after: light-dark(#8c6d43, #ccb18a);
  --chart-zone: light-dark(#b99b6414, #ccb18a0d);
  --chart-gap: light-dark(#936027, #deb77e);
  --warning: var(--chart-gap);

  /* The editorial page uses these aliases for the same surfaces and controls. */
  --paper: var(--bg);
  --ink: var(--text);
  --white: var(--surface);
  --button: var(--accent);
  --button-text: var(--on-accent);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}