/* ============================================================================
   Estimation Saint-Maur — canonical design tokens (SINGLE SOURCE OF TRUTH)
   ----------------------------------------------------------------------------
   Palette: meulière stone (warm-slate neutrals) + deep Marne teal (brand) +
   meulière ochre (accent). Origin: the accepted ticket-019 quartier-page
   prototype, adopted site-wide (home + quartier pages + PDF report) so the whole
   funnel reads as one brand.

   Every surface consumes THESE variables — do not hardcode hexes downstream:
   - index.html / legal pages : <link> this file, then styles.css maps to it.
   - quartier pages           : render-quartier-page.js inlines this file at build.
   - PDF report               : report/render-report.js mirrors these hues inline
                                 (self-contained doc; keep its :root in sync here).

   Legacy aliases (--paper/--muted/--champagne/--deep) let styles.css keep its
   existing rule names while pointing at the new palette; they resolve lazily via
   var(), so they follow light/dark automatically.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* neutrals — warm slate biased to meulière stone */
  --ground: #f6f3ec;      /* page background */
  --panel: #fffdf8;       /* cards, inputs, raised surfaces */
  --ink: #26312e;         /* primary text */
  --ink-soft: #55605b;    /* secondary text */
  --line: #e0dacd;        /* hairlines / borders */
  --bar-track: #e8e2d4;   /* muted fills (bar tracks, readonly) */

  /* brand + accents */
  --river: #2f5d57;       /* deep Marne teal — brand primary */
  --river-deep: #1e433f;  /* darkest teal — inverted panels / primary button */
  --ochre: #b06a34;       /* meulière ochre — accent, used sparingly */
  --ochre-soft: #d9a45f;  /* softer ochre — secondary accent / highlights */
  --good: #3f7d5a;        /* positive semantic */

  --shadow: 0 1px 2px rgba(30, 40, 38, .06), 0 8px 24px rgba(30, 40, 38, .06);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --- legacy aliases (map old styles.css names → new palette, lazy) --- */
  --paper: var(--panel);
  --muted: var(--ink-soft);
  --champagne: var(--ochre-soft);
  --deep: var(--river-deep);
  --white: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #171b1a; --panel: #1f2523; --ink: #ece7db; --ink-soft: #a3aaa2;
    --line: #313a37; --bar-track: #2a322f;
    /* --river-deep stays a DARK teal in dark mode: it is the background of the
       primary button / inverted result panel, which always carry light text. */
    --river: #6fb3a6; --river-deep: #14312e; --ochre: #d99a5e; --ochre-soft: #b9803f;
    --good: #6fb389;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --ground: #171b1a; --panel: #1f2523; --ink: #ece7db; --ink-soft: #a3aaa2;
  --line: #313a37; --bar-track: #2a322f;
  --river: #6fb3a6; --river-deep: #14312e; --ochre: #d99a5e; --ochre-soft: #b9803f;
  --good: #6fb389;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
}

:root[data-theme="light"] {
  --ground: #f6f3ec; --panel: #fffdf8; --ink: #26312e; --ink-soft: #55605b;
  --line: #e0dacd; --bar-track: #e8e2d4;
  --river: #2f5d57; --river-deep: #1e433f; --ochre: #b06a34; --ochre-soft: #d9a45f;
  --good: #3f7d5a;
  --shadow: 0 1px 2px rgba(30, 40, 38, .06), 0 8px 24px rgba(30, 40, 38, .06);
}