/* 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 never touches a component.
 *
 * Restyle by OVERRIDING these properties from the site's own stylesheet
 * (e.g. `ffsl-availability { --ffsl-color-ink: #b00020 }`), not by editing
 * this file: a plugin update replaces this file and keeps the override.
 * Defaults below are the approved Stage 6 Booking Flow design.
 *
 * No web font is loaded here. The widget inherits whatever the site already
 * loads (Inter on fullfocus.racing) and falls back to the system stack; a
 * venue that wants a display face loads it in its theme and points
 * --ffsl-font-display at it.
 */
:root {
  --ffsl-font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ffsl-font-display: Inter, "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-color-scrim: #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;

  /* How strongly a day cell is tinted by its supply: a couple / some /
   * plenty / wide open. A dark look needs stronger tints to read. */
  --ffsl-tint-1: 0.08;
  --ffsl-tint-2: 0.18;
  --ffsl-tint-3: 0.32;
  --ffsl-tint-4: 0.5;
}

/* The dark look, for a dark site. Colours only: type, spacing and radii are
 * the same in both. Switched per element, not per site, so one site can
 * carry a dark booking page and a light one: theme="dark" on the shortcode
 * (or the element), theme="auto" to follow the visitor's device setting.
 * The two blocks below are kept identical by test. */
ffsl-availability[theme="dark"],
ffsl-my-bookings[theme="dark"],
.ffsl-theme-dark {
  --ffsl-color-text: #ffffff;
  --ffsl-color-text-muted: #c3c6d8;
  --ffsl-color-bg-ground: #020221;
  --ffsl-color-bg-panel: #0b0b34;
  --ffsl-color-bg-input: #161649;
  --ffsl-color-text-on-ok: #ffffff;
  --ffsl-color-text-on-ink: #ffffff;
  --ffsl-color-ink: #3f4cde;
  --ffsl-color-scrim: #000000;

  --ffsl-state-ok: #1f8a4c;
  --ffsl-state-ok-soft: #10351f;
  --ffsl-state-warn: #f2c14e;
  --ffsl-state-warn-soft: #3d2e05;
  --ffsl-state-crit: #ff7b7b;
  --ffsl-state-crit-soft: #4a1418;

  --ffsl-border-panel: 1px solid #23245c;
  --ffsl-border-input: 1px solid #2f3070;
  --ffsl-focus-ring: 2px solid #ffffff;

  --ffsl-tint-1: 0.2;
  --ffsl-tint-2: 0.36;
  --ffsl-tint-3: 0.55;
  --ffsl-tint-4: 0.78;
}

@media (prefers-color-scheme: dark) {
  ffsl-availability[theme="auto"],
  ffsl-my-bookings[theme="auto"],
  .ffsl-theme-auto {
    --ffsl-color-text: #ffffff;
    --ffsl-color-text-muted: #c3c6d8;
    --ffsl-color-bg-ground: #020221;
    --ffsl-color-bg-panel: #0b0b34;
    --ffsl-color-bg-input: #161649;
    --ffsl-color-text-on-ok: #ffffff;
    --ffsl-color-text-on-ink: #ffffff;
    --ffsl-color-ink: #3f4cde;
    --ffsl-color-scrim: #000000;

    --ffsl-state-ok: #1f8a4c;
    --ffsl-state-ok-soft: #10351f;
    --ffsl-state-warn: #f2c14e;
    --ffsl-state-warn-soft: #3d2e05;
    --ffsl-state-crit: #ff7b7b;
    --ffsl-state-crit-soft: #4a1418;

    --ffsl-border-panel: 1px solid #23245c;
    --ffsl-border-input: 1px solid #2f3070;
    --ffsl-focus-ring: 2px solid #ffffff;

    --ffsl-tint-1: 0.2;
    --ffsl-tint-2: 0.36;
    --ffsl-tint-3: 0.55;
    --ffsl-tint-4: 0.78;
  }
}