/* The palette every app shares (token names in ../TOKENS.md): warm paper in light, midnight
   navy in dark, the home page's look. Served at /shared/palette.css, before an app's own
   styles. An app sets only its accent (--accent, --accent-bg, --accent-contrast,
   --accent-soft, --focus-ring) and tokens of its own. Fonts: /fonts/instrument and
   /fonts/bricolage. */

:root {
  color-scheme: light;
  --font: 'Instrument Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque Variable', var(--font);
  --app-bg: #f7f1e6;
  --bg: #fffcf6;
  --elevated: #ffffff;
  --input-bg: #ffffff;
  --surface-alt: #f0e8da;
  --border: #e8dccb;
  --border-strong: #d6c6ae;
  --text: #24170c;
  --muted: #6e5f4e;
  --faint: #9a8a76;
  --hover: #f3eadc;
  --accent: #a3530f;
  --accent-bg: #b85c12;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(184, 92, 18, 0.1);
  --focus-ring: rgba(184, 92, 18, 0.38);
  --pos: #2f7a3e;
  --pos-bg: #e5f2e6;
  --warn: #8a6100;
  --warn-bg: #fbf0d4;
  --neg: #b8322a;
  --neg-bg: #fbe7e4;
  --panel-shadow: 0 1px 2px rgba(60, 35, 10, 0.06), 0 6px 20px -8px rgba(60, 35, 10, 0.12);
  --pop-shadow: 0 24px 60px -12px rgba(60, 35, 10, 0.28);
}

/* Dark: when the system is dark (unless Light is chosen), or whenever Dark is chosen. Keep the two in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app-bg: #0a0e1a;
    --bg: #111729;
    --elevated: #172036;
    --input-bg: #0c1120;
    --surface-alt: #141b30;
    --border: #222c45;
    --border-strong: #323e5c;
    --text: #ecedf3;
    --muted: #9aa2b8;
    --faint: #6b7389;
    --hover: #1a2238;
    --accent: #f2a65a;
    --accent-bg: #c8691b;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(242, 166, 90, 0.13);
    --focus-ring: rgba(242, 166, 90, 0.45);
    --pos: #6cc27b;
    --pos-bg: rgba(108, 194, 123, 0.12);
    --warn: #e3b341;
    --warn-bg: rgba(227, 179, 65, 0.12);
    --neg: #f08070;
    --neg-bg: rgba(240, 128, 112, 0.12);
    --panel-shadow: 0 0 0 1px rgba(180, 200, 255, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
    --pop-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #0a0e1a;
  --bg: #111729;
  --elevated: #172036;
  --input-bg: #0c1120;
  --surface-alt: #141b30;
  --border: #222c45;
  --border-strong: #323e5c;
  --text: #ecedf3;
  --muted: #9aa2b8;
  --faint: #6b7389;
  --hover: #1a2238;
  --accent: #f2a65a;
  --accent-bg: #c8691b;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(242, 166, 90, 0.13);
  --focus-ring: rgba(242, 166, 90, 0.45);
  --pos: #6cc27b;
  --pos-bg: rgba(108, 194, 123, 0.12);
  --warn: #e3b341;
  --warn-bg: rgba(227, 179, 65, 0.12);
  --neg: #f08070;
  --neg-bg: rgba(240, 128, 112, 0.12);
  --panel-shadow: 0 0 0 1px rgba(180, 200, 255, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --pop-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.7);
}