/* ═══════════════════════════════════════════════════════════════════
   Gusta and caution colours  (shared stylesheet)

   SHARED MODULE. Edit in gusta-web-shared, then run `npm run sync-shared`
   in each consumer app. Do NOT edit the vendored copy under vendor/shared/.

   One Gusta colour in every app, the same everywhere: --gusta marks what
   Gusta did or offers (the pill's sparkle, receipts, pending ticks, chat
   cards) and fills the one primary on a Gusta surface with --on-gusta
   text. It never fills a large area and never marks a plain button.
   --warn is caution and checks: a yellow-amber kept at least 12 degrees
   of hue from --gusta, and never used alone (always with an icon or a
   word). The app accent stays the app's own.

   Link it FIRST, before the app's own sheet, and delete the app's own
   --gusta and --warn definitions:
     <link rel="stylesheet" href="vendor/shared/gusta-tokens.css">
   Dark is the default; light follows data-theme="light" on <html>, the
   switch every app already uses. The values equal GUSTA_TOKENS and
   WARN_TOKENS in colour.mjs (pinned by tests). See CONTRACTS.md section 10.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gusta: #ffb45e;
  --gusta-dim: #d98f3c;
  --gusta-bg: rgba(255, 180, 94, 0.13);
  --on-gusta: #2a1603;
  --warn: #f2cc3d;
  --warn-dim: #c9a72a;
  --warn-bg: rgba(242, 204, 61, 0.14);
  --on-warn: #1a1300;
}

:root[data-theme='light'] {
  --gusta: #9a520c;
  --gusta-dim: #7a410a;
  --gusta-bg: rgba(194, 106, 18, 0.10);
  --on-gusta: #ffffff;
  --warn: #7a6400;
  --warn-dim: #5e4d00;
  --warn-bg: rgba(122, 100, 0, 0.10);
  --on-warn: #ffffff;
}