/* Booksunbed — shared design tokens (vanilla CSS :root)
 * Canonical copy: packages/design-tokens/shared-tokens.css
 * Deployed copies: apps/<app-name>/css/shared-tokens.css (guest-web, vendor-web, admin-web) — run `pnpm sync:design-tokens` after edits.
 * Load before app-specific CSS.
 */

:root {
  /* --- Colour (semantic) --- */
  --color-brand: #1a3a8f;
  --color-brand-strong: #0f2460;
  --color-brand-muted: #3d5ba9;

  --color-surface: #ffffff;
  --color-surface-subtle: #f4f6fa;

  --color-border: #e5e7eb;
  --color-border-strong: #e8eaf0;

  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;

  --color-success: #059669;
  --color-success-bg: #ecfdf5;

  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;

  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;
  --color-warning-text: #78350f;

  --color-accent-guest: #ffb5c2;

  /* Guest mobile: sticky action bar (beach → seatmap flow); navy + gold CTA */
  --color-accent-gold: #c9a84c;
  --color-guest-action-bar-bg: var(--color-brand);
  --color-guest-action-bar-text: #ffffff;
  --color-guest-action-bar-text-muted: rgba(255, 255, 255, 0.78);
  --color-guest-action-bar-cta-bg: var(--color-accent-gold);
  --color-guest-action-bar-cta-text: var(--color-text);

  --color-surface-inverse: var(--color-brand-strong);

  /* --- Typography --- */
  --font-sans:
    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --line-tight: 1.25;
  --line-normal: 1.5;
  --letter-tight: -0.02em;

  /* --- Spacing (4px grid) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* --- Shadow --- */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-lg: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-nav: 0 2px 8px rgba(15, 36, 96, 0.12);

  /* --- Focus --- */
  --focus-ring: 2px solid var(--color-brand);
  --focus-offset: 2px;

  /* --- Buttons --- */
  --border-width: 1px;
  --btn-height-sm: 36px;
  --btn-height-md: 40px;
  --btn-height-touch: 44px;
  --btn-pad-x-md: 14px;
  --btn-pad-x-lg: 18px;
  --btn-radius: var(--radius-md);
  --color-btn-primary-bg: var(--color-brand);
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-border: var(--color-border);
  --color-btn-ghost-text: var(--color-brand);

  /* --- Layout width --- */
  /* Inner components / sheets; page shell is full width <1024px via guest-mobile-shell.css */
  --layout-max-guest: 390px;
  --layout-max-vendor: 960px;
}

.bsb-focus:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}