/**
 * Booking V3 – design tokens (direction A "Clinic Editorial").
 *
 * Every token lives on .bsv3 (the popup <dialog>, the confirm dialog, the page toast stack),
 * so nothing leaks into the theme. Breakpoints: desktop >= 1100px, tablet 768–1099px,
 * phone <= 767px. Contract: buchungssystem/docs/V3-CONTRACTS.md 3.6.
 */

.bsv3 {
    /* colour */
    --bs-lead: #495f76;
    --bs-lead-600: #3d4f63;
    --bs-secondary: #769cc1;
    --bs-tint: #f1f4f7;
    --bs-tint-600: #e4eaf0;
    --bs-line: #e5eaee;
    --bs-line-600: #cfd8e0;
    --bs-line-strong: #7d8a99;          /* form control borders: 3.5:1 on white, 3.2:1 on --bs-tint (WCAG 1.4.11) */
    --bs-text: #2f3a47;
    --bs-muted: #6b7a8c;
    --bs-muted-text: #5c6a7b;           /* muted TEXT: 5.5:1 on white, 5.0:1 on --bs-tint (WCAG AA) */
    --bs-surface: #fff;
    --bs-success: #718a7a;
    --bs-success-600: #627a6b;
    --bs-confirm: #56705f;              /* confirm CTA fill: white text 5.4:1 (--bs-success is 3.7:1) */
    --bs-confirm-600: #4b6354;
    --bs-success-text: #56705f;         /* text on --bs-success-bg */
    --bs-success-bg: #e9f0ec;
    --bs-warn: #8a5f00;                 /* text: 5.3:1 on --bs-warn-bg, 5.6:1 on white */
    --bs-warn-bg: #fff7e0;
    --bs-error: #b3261e;
    --bs-error-bg: #fbeeed;
    /* Focus ring: white gap + lead ring (6.6:1 on white, 6.0:1 on --bs-tint; the gap keeps it visible on lead fills).
       Box-shadows vanish in forced-colors mode: components with hidden inputs add a Highlight outline there. */
    --bs-focus: 0 0 0 2px var(--bs-surface), 0 0 0 4px var(--bs-lead);
    --bs-focus-inset: inset 0 0 0 2px var(--bs-lead);
    --bs-backdrop: rgba(0, 0, 0, 0.75);
    --bs-scrim: rgba(47, 58, 71, 0.55);
    --bs-skeleton: #e9eef2;
    --bs-skeleton-hi: #f6f8fa;

    /* type */
    --bs-font: 'Montserrat', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
    --bs-fs-body: 15px;
    --bs-lh-body: 1.6;
    --bs-fs-small: 13px;
    --bs-fs-xs: 11px;
    --bs-fs-input: 16px;                /* >= 16px: iOS does not zoom into focused fields */
    --bs-fs-title: 24px;
    --bs-ls-title: 2px;
    --bs-fs-heading: 13px;
    --bs-ls-heading: 1.5px;
    --bs-ls-eyebrow: 1.2px;

    /* radii */
    --bs-r-modal: 20px;
    --bs-r-card: 12px;
    --bs-r-control: 10px;
    --bs-r-pill: 999px;
    --bs-r-sheet: 16px;

    /* sizes */
    --bs-btn-h-lg: 52px;
    --bs-btn-h-md: 44px;
    --bs-btn-h-sm: 36px;
    --bs-tap: 44px;
    --bs-header-h: 84px;
    --bs-appbar-h: 56px;
    --bs-bar-h: 72px;
    --bs-ledger-w: 340px;

    /* spacing */
    --bs-pad: 40px;
    --bs-gap: 28px;
    --bs-card-pad: 24px;
    --bs-row-pad: 16px 20px;

    /* elevation */
    --bs-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --bs-shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.10);
    --bs-shadow-bar: 0 -4px 16px rgba(0, 0, 0, 0.06);
    --bs-shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.18);
    --bs-shadow-toast: 0 8px 24px rgba(20, 20, 19, 0.18);

    /* motion */
    --bs-motion-fast: 140ms;
    --bs-motion: 220ms;
    --bs-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 1099px) {
    .bsv3 {
        --bs-pad: 32px;
        --bs-gap: 24px;
        --bs-header-h: 72px;
    }
}

@media (max-width: 767px) {
    .bsv3 {
        --bs-pad: 16px;
        --bs-gap: 16px;
        --bs-card-pad: 16px;
        --bs-row-pad: 14px 16px;
        --bs-fs-title: 22px;
        --bs-ls-title: 1.5px;
        --bs-bar-h: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsv3 {
        --bs-motion-fast: 0ms;
        --bs-motion: 0ms;
    }
}