/* ============================================================================
   RestoKernel — customer-surface brand tokens (rk-brand.css v1)
   ----------------------------------------------------------------------------
   Semantic tokens shared by every customer-visible surface:
   tenant sites (sites/*/index.html), table-order (table.html), ordering
   (commander.html, suivi.html), loyalty (fidelite.html), lottery (l.html)
   and the merchant validation page (validate.html).

   Rules:
   - This file DEFINES ONLY --brand-* tokens. It never sets host variables
     (--jade, --ink, --paper, --gold, …) so tenant brand identity always wins.
   - Tokens reference host-NATIVE variables only (--ink, --olive, --bg,
     --accent, --accent-2, --paper, --line, …), never the legacy Demo-palette
     names (--jade, --ember, --gold, --gold-soft, --ivory): pages that remap
     those legacy names TO the tokens below would otherwise create a CSS
     custom-property cycle (--jade → --brand-primary → --jade = invalid).
     Fallbacks are the Demo defaults, identical to the commander.html mapping
     on the LUMA host.
   - SHAPE system (unified): --brand-pill for buttons + lang-switch pills,
     --brand-radius / --brand-radius-lg for cards/inputs. Tenant sheets keep
     their own values where their identity differs — they just reference the
     token when the value is identical.
   - Legacy Demo-palette names (--jade, --ember, --gold, --gold-soft,
     --gold-pale, --ivory, --jade-deep, --jade-soft) are NOT defined here.
     Pages served on the LUMA host (which lacks them) remap them locally to
     the tokens below (see table.html / fidelite.html / suivi.html, same
     mapping as commander.html).
   ========================================================================== */
:root {
  /* ---- semantic colors (host-aware, commander-compatible on LUMA) ---- */
  --brand-primary: var(--ink, #0f3d2e);
  --brand-primary-deep: var(--olive, #0a2a20);
  --brand-primary-soft: var(--olive, #dfeae2);
  --brand-on-primary: var(--bg, #fffcf5);
  --brand-ink: var(--ink, #171310);
  --brand-paper: var(--paper, #fffcf5);
  --brand-surface: var(--bg, #f6f0e2);
  --brand-line: var(--line, #e7e0d2);
  --brand-accent: var(--accent-2, #c4923b);
  --brand-accent-soft: var(--accent-2, #e3a63b);
  --brand-accent-pale: #ffe9a8;
  --brand-danger: var(--accent, #c4531e);

  /* ---- shape system (unified across the customer journey) ---- */
  --brand-radius: 12px;
  --brand-radius-lg: 18px;
  --brand-pill: 999px;
  --brand-font-display: var(--font-display, Georgia, "Times New Roman", serif);
  --brand-shadow: var(--shadow, 0 14px 34px -26px rgba(23, 19, 16, 0.4));
}

/* ---- shared segmented lang-switch pill ----------------------------------
   Same shape on every surface of the journey (site → commander → /t/ →
   /l/ → /validate). Colors inherit from the host via brand tokens, so each
   tenant keeps its identity. Pages keep their own markup (.lang-switch with
   [data-lang] buttons + aria-pressed); including this class is optional —
   the canonical shape values above are the contract.
   -------------------------------------------------------------------------- */
.rk-lang-switch {
  display: inline-flex;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-pill);
  overflow: hidden;
}
.rk-lang-switch button {
  border: none;
  background: transparent;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--brand-ink);
}
.rk-lang-switch button[aria-pressed="true"] {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}

/* ---- shared toast (customer-visible replacement for alert()) -------------
   fidelite.html already ships an equivalent .toast; demo site uses <dialog>.
   Kept here so any surface can adopt it without copying CSS.
   -------------------------------------------------------------------------- */
.rk-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(20px);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  padding: 0.7rem 1.3rem;
  border-radius: var(--brand-pill);
  box-shadow: var(--brand-shadow);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 200;
}
.rk-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}