/* ════════════════════════════════════════════════════════════════════════
   SINGLE SOURCE OF TRUTH for the WEB palette (reserve page + privacy page).

   Change the values here and BOTH pages re-theme. It's linked from
   index.html (the Svelte reserve app) and from public/privacy.html.

   The Flutter app has its own one-file palette in
   app/lib/src/widgets/gradient_scaffold.dart → QGradients. Keep the two in
   sync if you want all three surfaces to match.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* gradient (top → bottom): CREAM × SAND — soft, warm ivory (from the cream
     business card) deepening to a warm sand so cards keep contrast. */
  --bg-top: #f6ecda;
  --bg-mid: #efe0cb;
  --bg-bot: #e6d4b8;

  /* surfaces — a translucent white veil over the cream gradient, so cards read
     as a paler-cream version of the background (same palette, just lighter)
     rather than a separate off-white block */
  --card: rgba(255, 255, 255, .55);
  --card-border: rgba(255, 255, 255, .45);
  --card-shadow: 0 6px 18px -8px rgba(70, 61, 51, .28);
  --field: rgba(255, 255, 255, .58);
  --border: rgba(255, 255, 255, .40);

  /* text (warm brown, for the cream background) */
  --text: #463d33;          /* primary text (deep warm brown) */
  --muted: #7b7164;         /* secondary text (warm taupe) */
  --placeholder: #9a8f7e;
  --on-bg: #463d33;         /* text directly on the cream gradient */
  --on-bg-muted: #6a5f50;

  /* accents */
  --accent: #a87b5e;        /* MOCHA / copper — button / FAB fill (from brown card) */
  --accent-ink: #ffffff;    /* white text on the mocha accent */
  --link: #955e36;          /* caramel — links & big numbers (readable on cream) */

  /* status */
  --ok: #3f8e5a;            /* "your turn" green (earthy) */
  --ok-ink: #ffffff;        /* text on the green banner */
  --warn: #9a3412;          /* amber (darkened) */
  --error: #be3a26;
}