/* The venue theme for the public booking surface.
 *
 * This is THE restyling surface: a HOST token block — the one place values
 * are named. Every widget view (browse, slot sheet, my bookings, the cancel
 * page) references only var(--ffsl-*) custom properties, enforced by test,
 * so restyling the embed for any venue means editing THIS file or
 * overriding these properties in the site's stylesheet — never touching a
 * component. Defaults below are the approved Stage 6 Booking Flow design.
 */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

:root {
  --ffsl-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ffsl-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ffsl-size-small: 0.82rem;
  --ffsl-weight-strong: 600;

  --ffsl-color-text: #17202a;
  --ffsl-color-text-muted: #5b6772;
  --ffsl-color-bg-ground: #f4f6f8;
  --ffsl-color-bg-panel: #ffffff;
  --ffsl-color-bg-input: #f4f6f8;
  --ffsl-color-text-on-ok: #ffffff;
  --ffsl-color-text-on-ink: #ffffff;
  --ffsl-color-ink: #17202a;

  --ffsl-state-ok: #1d6f42;
  --ffsl-state-ok-soft: #eaf4ee;
  --ffsl-state-warn: #8a5a00;
  --ffsl-state-warn-soft: #fdf3d7;
  --ffsl-state-crit: #a4262c;
  --ffsl-state-crit-soft: #f7e6e7;

  --ffsl-border-panel: 1px solid #d5dbe1;
  --ffsl-border-input: 1px solid #c5cdd5;
  --ffsl-focus-ring: 2px solid #17202a;

  --ffsl-radius-sm: 8px;
  --ffsl-radius-lg: 12px;

  --ffsl-space-1: 4px;
  --ffsl-space-2: 8px;
  --ffsl-space-3: 12px;
  --ffsl-space-4: 16px;
  --ffsl-space-8: 40px;

  --ffsl-opacity-disabled: 0.45;
}