/**
 * Lilibet's — design tokens.
 *
 * Colour values are measured from the live lilibetsrestaurant.com theme
 * stylesheet (`themes/lilibets/dist/css/main.css`). Frequency of use in that
 * file, for the record: #9c8256 x110, #ffffff x86, #f0e8d7 x59, #bea777 x46.
 * So gold is the brand's workhorse and cream is the ground it sits on.
 *
 * The interior photography is dark, warm and low-lit (brass, cream plaster,
 * green glass, patterned banquettes). The booking engine leans into that: a
 * near-black warm ground so the gold reads as candlelight rather than as a
 * "buy now" colour.
 *
 * Typography substitutes Google Fonts for the site's licensed faces:
 *   Quincy CF    -> Fraunces   (warm high-contrast soft-serif, ball terminals)
 *   Proxima Nova -> Figtree    (geometric-humanist sans, near-identical metrics)
 */

.sr-booking,
.sr-manage,
.sr-inspector,
.sr-inspector-fab,
/* The modal's own chrome — backdrop, dialog, close button — sits outside
   .sr-booking, so without this every token it reaches for is undefined and the
   dialog renders with no background at all. */
.sr-modal {
  /* Brand — measured */
  --gold: #9c8256;
  /* The pressed/hover shade of the accent, and the text that sits on it. Both
     were hardcoded inside the button rules, which put them out of reach of the
     Appearance settings — a venue changing the accent to something pale ended
     up with white text on it. */
  --gold-hover: #8a7249;
  --cta-fg: #ffffff;
  --gold-light: #bea777;
  --gold-pale: #d8c69b;

  /* Muddy bronze for active/selected chips — deliberately lighter than the gold
     CTA so a selected pill reads as "chosen", not as a call to action. */
  --chip-hover: #f2ece5;
  --chip-active: #d1c3b5;
  --chip-active-line: #c3b09c;
  --cream: #f0e8d7;
  --cream-deep: #e3d7bf;
  --claret: #4e0018;
  --claret-light: #780018;
  --sea: #c1d4d8;

  /* Warm near-black ground, pulled from the interior photography */
  --ink: #14100c;
  --ink-raised: #1e1913;
  --ink-card: #262019;
  --ink-line: #372e24;
  --ink-line-soft: #2b241c;

  /* Text on dark */
  --on-dark: #f7f2e8;
  --on-dark-muted: #bfb4a1;
  --on-dark-faint: #8c8271;

  /* Text on light */
  --on-light: #1a1611;
  --on-light-muted: #5c5346;
  --on-light-faint: #8b8272;

  /* Light surfaces */
  --surface: #ffffff;
  --canvas: #faf7f1;
  --border: #e6dfd2;
  --border-soft: #f0ebe1;

  /* Semantic */
  --ok: #4f7a52;
  --ok-tint: #eaf1ea;
  --warn: #a8712a;
  --warn-tint: #fbf2e5;
  --danger: #a3342c;
  --danger-tint: #f9ecea;

  /* Type */
  --font-display: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Letterspacing — the site sets wide tracking on its small caps labels */
  --track-label: 0.18em;
  --track-eyebrow: 0.32em;

  /* Radii — the live site is nearly square; 2px keeps it crisp, not techy */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.06);
  --shadow-md: 0 4px 24px rgba(20, 16, 12, 0.1);
  --shadow-lg: 0 18px 60px rgba(20, 16, 12, 0.22);
  --shadow-dark: 0 20px 70px rgba(0, 0, 0, 0.55);

  /* Layout */
  --container: 1240px;
  --container-narrow: 900px;
  --gutter: 20px;
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
  --t-slow: 520ms;
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --header-h: 76px;
  }
}