/**
 * Bilbordia OOH — design tokens (--boohc-*).
 *
 * Single source of truth for planner, map, public, availability, and admin.
 * Enqueue before any other boohc-*.css / bilbordia-ooh-*.css file.
 *
 * Contract (aligned with Onboarding --bonb-* / DESIGN-wise):
 * - Dual-DOM / layout lock chooses which planner tree is visible (device class).
 * - 640 / 960 media queries below refine density inside the active tree.
 * - New hex values belong here only; component CSS uses var(--boohc-*).
 */

:root {
    /* ------------------------------------------------------------------ */
    /* Brand (Bilbordia green — Wise primary analogue)                     */
    /* ------------------------------------------------------------------ */
    --boohc-brand: #33f078;
    --boohc-brand-dark: #22c55e;
    --boohc-brand-accent: #42f8d0;
    --boohc-brand-subtle: #f0fdf4;
    --boohc-brand-tint: #f8fffe;
    --boohc-brand-pale: #e2f6d5;
    --boohc-brand-ring: rgba(51, 248, 120, 0.35);
    --boohc-accent: var(--boohc-focus);

    /* Ink */
    --boohc-ink: #0e0f0c;
    --boohc-ink-deep: #163300;

    /* Commerce (block/rent + base/operation — soft chips, Onboarding-readable) */
    --boohc-rent: #0e0f0c;
    --boohc-rent-bg: #eef0ed;
    --boohc-rent-text: #0e0f0c;
    --boohc-op: #9a3412;
    --boohc-op-bg: #fff4e8;
    --boohc-op-text: #9a3412;

    /* Interactive */
    --boohc-focus: #2563eb;
    --boohc-focus-dark: #1d4ed8;
    --boohc-focus-ring: rgba(37, 99, 235, 0.25);
    --boohc-focus-ring-light: rgba(37, 99, 235, 0.15);
    --boohc-action: var(--boohc-brand);
    --boohc-action-hover: var(--boohc-brand-dark);
    --boohc-action-ring: var(--boohc-brand-ring);

    /* Text */
    --boohc-text: var(--boohc-ink);
    --boohc-text-strong: #333333;
    --boohc-text-body: #454745;
    --boohc-text-muted: #868685;
    --boohc-text-subtle: #888888;
    --boohc-text-faint: #999999;
    --boohc-text-placeholder: #aaaaaa;
    --boohc-text-inverse: #ffffff;
    --boohc-text-on-brand: #000000;
    --boohc-text-on-brand-muted: rgba(0, 0, 0, 0.5);
    --boohc-text-map: #374151;
    --boohc-text-map-muted: #6b7280;

    /* Surfaces */
    --boohc-surface-page: #e8ebe6;
    --boohc-surface: #ffffff;
    --boohc-surface-muted: #f8f9fa;
    --boohc-surface-subtle: #f9f9f9;
    --boohc-surface-readonly: #f5f5f5;
    --boohc-surface-hover: #f0f0f0;
    --boohc-surface-gallery: #f7f7f7;
    --boohc-surface-selected: #f8fafc;
    --boohc-surface-elevated: #f3f4f6;
    --boohc-surface-overlay: #f1f5f9;
    --boohc-surface-glass: rgba(255, 255, 255, 0.92);

    /* Borders */
    --boohc-border: #dddddd;
    --boohc-border-light: #eeeeee;
    --boohc-border-medium: #e0e0e0;
    --boohc-border-map: #e5e7eb;
    --boohc-border-map-soft: #cfd8e2;
    --boohc-border-map-faint: #f3f4f6;
    --boohc-border-price-sheet: rgba(0, 0, 0, 0.2);
    --boohc-outline-shortlist: rgba(37, 99, 235, 0.35);

    /* Status (collapsed semantic set + legacy aliases) */
    --boohc-status-saving: #1976d2;
    --boohc-status-saved: #4caf50;
    --boohc-status-saved-dark: #45a049;
    --boohc-status-saved-ring: rgba(76, 175, 80, 0.2);
    --boohc-status-success: #15803d;
    --boohc-status-error: #d03238;
    --boohc-status-danger: #dc3545;
    --boohc-status-danger-dark: #c0392b;
    --boohc-status-error-alt: var(--boohc-status-error);
    --boohc-status-error-deep: var(--boohc-status-danger);
    --boohc-status-error-deeper: var(--boohc-status-danger-dark);
    --boohc-status-typing: var(--boohc-text-subtle);
    --boohc-status-available: #15803d;
    --boohc-status-unavailable: #b91c1c;
    --boohc-status-available-text: rgb(21, 87, 36);
    --boohc-status-available-bg: rgb(212, 237, 218);
    --boohc-status-unavailable-text: rgb(114, 28, 36);
    --boohc-status-unavailable-bg: rgb(248, 215, 218);

    /* Overlays */
    --boohc-overlay-scrim: rgba(0, 0, 0, 0.5);
    --boohc-overlay-dark: rgba(17, 24, 39, 0.75);
    --boohc-overlay-dark-hover: rgba(17, 24, 39, 0.9);
    --boohc-overlay-muted: rgba(17, 24, 39, 0.5);
    --boohc-overlay-badge: rgba(15, 23, 42, 0.72);
    --boohc-overlay-panel: rgba(15, 23, 42, 0.82);
    --boohc-overlay-lightbox: rgba(0, 0, 0, 0.88);
    --boohc-overlay-loading: rgba(0, 0, 0, 0.42);
    --boohc-overlay-controls: rgba(17, 24, 39, 0.92);
    --boohc-overlay-controls-soft: rgba(17, 24, 39, 0.72);

    /* Map CTA */
    --boohc-map-cta: rgb(29, 43, 58);
    --boohc-map-cta-hover: rgb(17, 24, 39);

    /* ------------------------------------------------------------------ */
    /* Radius (DESIGN-wise–aligned)                                       */
    /* ------------------------------------------------------------------ */
    --boohc-radius-xs: 3px;
    --boohc-radius-sm: 8px;
    --boohc-radius-md: 12px;
    --boohc-radius-lg: 16px;
    --boohc-radius-xl: 24px;
    --boohc-radius-pill: 9999px;
    --boohc-radius: var(--boohc-radius-md);
    --boohc-radius-control: 12px;

    /* Shadow */
    --boohc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
    --boohc-shadow-sheet: 0 -2px 10px rgba(0, 0, 0, 0.15);
    --boohc-shadow-bar: 0 4px 10px rgba(0, 0, 0, 0.1);
    --boohc-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.12);
    --boohc-shadow-marker: 0 2px 6px rgba(0, 0, 0, 0.2);
    --boohc-shadow-debug: 0 4px 16px rgba(0, 0, 0, 0.25);
    --boohc-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.15);
    --boohc-shadow-map: 0 2px 8px rgba(0, 0, 0, 0.1);
    --boohc-shadow-gallery: 0 12px 40px rgba(0, 0, 0, 0.35);
    --boohc-shadow-loading: 0 8px 32px rgba(0, 0, 0, 0.35);
    --boohc-marker-activated-ring: 0 0 0 3px var(--boohc-focus-ring), var(--boohc-shadow-map);
    --boohc-caption-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

    /* ------------------------------------------------------------------ */
    /* Spacing — monotonic scale (was broken: 2xl < xl)                   */
    /* ------------------------------------------------------------------ */
    --boohc-space-xxs: 2px;
    --boohc-space-xs: 4px;
    --boohc-space-sm: 8px;
    --boohc-space-md: 12px;
    --boohc-space-lg: 16px;
    --boohc-space-xl: 24px;
    --boohc-space-2xl: 32px;
    --boohc-space-3xl: 48px;
    --boohc-space-4xl: 64px;
    --boohc-space-2: var(--boohc-space-lg);
    --boohc-gap-control: var(--boohc-space-lg);
    --boohc-gap-resource: var(--boohc-space-sm);
    --boohc-padding-control: var(--boohc-space-lg);
    --boohc-padding-resource: var(--boohc-space-sm);
    --boohc-padding-sheet: 10px;

    /* Typography — dense defaults for desktop table; mobile overrides below (Onboarding) */
    --boohc-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --boohc-font-micro: 12px;
    --boohc-font-label: 12px;
    --boohc-font-caption: 13px;
    --boohc-font-sm: 14px;
    --boohc-font-body: 14px;
    --boohc-font-title: 15px;
    --boohc-font-subtitle: 16px;
    --boohc-font-heading: 18px;
    --boohc-font-section: 22px;
    --boohc-font-display: 24px;
    --boohc-font-remove: 32px;
    --boohc-font-page-title: 28px;
    --boohc-font-product-name: var(--boohc-font-subtitle);
    --boohc-font-lg: 18px;

    /* ------------------------------------------------------------------ */
    /* Interaction + safe area (Onboarding parity)                        */
    /* ------------------------------------------------------------------ */
    --boohc-touch-min: 48px;
    --boohc-input-pad-y: 12px;
    --boohc-input-pad-x: 14px;
    --boohc-btn-pad-y: 12px;
    --boohc-btn-pad-x: 20px;
    --boohc-transition: 180ms ease;
    --boohc-safe-bottom: env(safe-area-inset-bottom, 0px);
    --boohc-safe-top: env(safe-area-inset-top, 0px);
    --boohc-safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

    /* ------------------------------------------------------------------ */
    /* Layout / component (planner-specific)                              */
    /* ------------------------------------------------------------------ */
    --boohc-header-shell-gap: var(--boohc-space-lg);
    --boohc-header-shell-margin-bottom: var(--boohc-space-xl);
    --boohc-header-title-size: var(--boohc-font-page-title);
    --boohc-header-title-weight: 600;
    --boohc-header-title-color: var(--boohc-ink);
    --boohc-header-shell-bg: var(--boohc-surface);
    --boohc-header-shell-radius: var(--boohc-radius-xl);
    --boohc-header-shell-padding: var(--boohc-space-xl);
    --boohc-header-title-line-height: 1.25;
    --boohc-header-title-margin-bottom: 0;
    --boohc-header-edit-color: var(--boohc-text-muted);
    --boohc-header-edit-hover: var(--boohc-text);
    --boohc-price-bar-width: 1200px;
    --boohc-campaign-col-selector: 220px;
    --boohc-campaign-col-name: 200px;
    --boohc-campaign-col-dates: 228px;
    --boohc-campaign-col-budget: 168px;
    --boohc-drp-min-width: 680px;
    --boohc-drp-calendar-width: 300px;
    --boohc-drp-mobile-min-width: 300px;
    --boohc-map-height: 500px;
    --boohc-map-min-height: 500px;
    --boohc-planner-map-width: min(520px, 44vw);
    --boohc-planner-map-height: calc(100vh - 160px);
    --boohc-planner-map-min-height: 420px;
    --boohc-planner-map-sticky-top: 96px;
    --boohc-planner-work-gap: var(--boohc-space-xl);
    --boohc-col-gutter: var(--boohc-space-md);
    --boohc-thumbnail-desktop: 180px;
    --boohc-thumbnail-mobile: 80px;
    --boohc-col-checkbox: 44px;
    --boohc-col-remove: 44px;
    --boohc-col-identity: 21%;
    --boohc-col-identity-min: 150px;
    --boohc-col-identity-max: 180px;
    --boohc-col-booking-terms: 110px;
    --boohc-col-resources: 30%;
    --boohc-col-actions: 72px;
    --boohc-checkbox-lg: 25px;
    --boohc-checkbox-md: 24px;
    --boohc-checkbox-sm: 20px;
    --boohc-input-qty-width: 64px;
    --boohc-control-height: 36px;
    --boohc-input-min-height: var(--boohc-control-height);
    --boohc-availability-min-height: 30px;
    --boohc-notes-min-height: 60px;
    --boohc-budget-input-padding: 45px;
    --boohc-toggle-bottom: 22px;
    --boohc-pswp-arrow-size: 44px;
    --boohc-toggle-fab-size: 50px;
    --boohc-toggle-badge-size: 20px;
    --boohc-field-min-sm: 150px;
    --boohc-field-min-md: 200px;
    --boohc-field-min-lg: 220px;
    --boohc-field-min-xl: 350px;
    --boohc-field-min-2xl: 400px;

    /* Price bar / CTA */
    --boohc-price-bar-bg: var(--boohc-surface);
    --boohc-price-bar-border: var(--boohc-border-map);
    --boohc-price-bar-bg-exceeded: var(--boohc-surface);
    --boohc-price-bar-border-exceeded: var(--boohc-status-danger);
    --boohc-price-bar-text: var(--boohc-ink);
    --boohc-price-bar-radius: var(--boohc-radius-xl);
    --boohc-cta-bg: var(--boohc-brand);
    --boohc-cta-bg-hover: var(--boohc-brand-dark);
    --boohc-cta-text: var(--boohc-text-on-brand);
    --boohc-toggle-hidden-bg: #cccccc;
    --boohc-badge-bg: var(--boohc-status-danger);
    --boohc-badge-text: var(--boohc-text-inverse);

    /* Debug toolbar */
    --boohc-debug-bg: rgba(15, 23, 42, 0.92);
    --boohc-debug-text: #e2e8f0;
    --boohc-debug-border: #334155;
    --boohc-debug-btn-bg: #1e293b;
    --boohc-debug-btn-border: #475569;
    --boohc-debug-btn-hover: #334155;

    --boohc-row-selected-bg: rgba(51, 248, 120, 0.08);
    --boohc-row-activated-bg: rgba(51, 248, 120, 0.12);
    --boohc-row-shortlist-bg: rgba(51, 248, 120, 0.1);
    --boohc-row-hover-bg: rgba(51, 248, 120, 0.05);
    --boohc-resource-selected-border: var(--boohc-brand);
    --boohc-spinner-track: rgba(255, 255, 255, 0.2);

    /* Z-index */
    --boohc-z-map-marker-hover: 100;
    --boohc-z-map-infobox: 150;
    --boohc-z-map-gallery-fs: 200;
    --boohc-z-price-bar: 9999;
    --boohc-z-toggle: 10000;
    --boohc-z-modal: 10001;
    --boohc-z-debug: 99999;
}

/*
 * Phone density — Onboarding parity (bonb @640).
 * Also apply under layout lock so ?boohc_layout=mobile gets readable type
 * even when the viewport is wider than 640px.
 */
@media (max-width: 640px) {
    :root {
        --boohc-font-micro: 12px;
        --boohc-font-label: 0.875rem;
        --boohc-font-caption: 0.9375rem;
        --boohc-font-sm: 0.875rem;
        --boohc-font-body: 16px;
        --boohc-font-title: 1.0625rem;
        --boohc-font-subtitle: 1.0625rem;
        --boohc-font-heading: 1.0625rem;
        --boohc-font-lg: 1.0625rem;
        --boohc-font-page-title: 1.375rem;
        --boohc-header-shell-padding: var(--boohc-space-lg);
        --boohc-touch-min: 44px;
        --boohc-control-height: 44px;
        --boohc-input-min-height: 44px;
        --boohc-input-pad-y: 12px;
        --boohc-input-pad-x: 12px;
        --boohc-btn-pad-y: 12px;
        --boohc-btn-pad-x: 20px;
        --boohc-checkbox-md: 22px;
        --boohc-map-height: min(42vh, 280px);
        --boohc-map-min-height: 220px;
        --boohc-planner-map-min-height: 220px;
    }
}

html.boohc-planner--mobile {
    --boohc-font-micro: 12px;
    --boohc-font-label: 0.875rem;
    --boohc-font-caption: 0.9375rem;
    --boohc-font-sm: 0.875rem;
    --boohc-font-body: 16px;
    --boohc-font-title: 1.0625rem;
    --boohc-font-subtitle: 1.0625rem;
    --boohc-font-heading: 1.0625rem;
    --boohc-font-lg: 1.0625rem;
    --boohc-font-page-title: 1.375rem;
    --boohc-touch-min: 44px;
    --boohc-control-height: 44px;
    --boohc-input-min-height: 44px;
    --boohc-checkbox-md: 22px;
}

/* Desktop scale-up (planner table stays denser than Onboarding forms) */
@media (min-width: 960px) {
    :root {
        --boohc-font-body: 15px;
        --boohc-font-sm: 14px;
        --boohc-font-caption: 13px;
        --boohc-font-subtitle: 16px;
        --boohc-font-title: 15px;
        --boohc-touch-min: 48px;
        --boohc-input-pad-y: 12px;
        --boohc-input-pad-x: 16px;
        --boohc-btn-pad-y: 14px;
        --boohc-btn-pad-x: 24px;
        --boohc-space-md: 14px;
        --boohc-space-lg: 18px;
        --boohc-space-xl: 28px;
    }

    /* Forced mobile layout on a wide screen keeps phone type */
    html.boohc-planner--mobile {
        --boohc-font-body: 16px;
        --boohc-font-sm: 0.875rem;
        --boohc-font-caption: 0.9375rem;
        --boohc-font-label: 0.875rem;
        --boohc-font-title: 1.0625rem;
        --boohc-font-subtitle: 1.0625rem;
        --boohc-font-heading: 1.0625rem;
        --boohc-font-lg: 1.0625rem;
        --boohc-font-page-title: 1.375rem;
        --boohc-touch-min: 44px;
        --boohc-control-height: 44px;
        --boohc-input-min-height: 44px;
        --boohc-checkbox-md: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --boohc-transition: 0ms;
    }
}