/**
 * Design tokens runtime file (loaded on every surface).
 * Keep this header minimal: long governance notes belong in docs, not production CSS.
 * Version: v29.8.4 (Apr 2026) — --ui-table-card-shadow* usa --surface-overlay-* (hook dark theme).
 * v29.8.3 (Apr 2026) — table hover: componenti usano solo --capri-table-row-hover-bg; alias documentati inline.
 * v29.8.2 (Apr 2026) — --capri-table-row-hover-bg SSOT (hover riga tabella); alias ds/owner/table-row-hover.
 * v29.7.1 (Apr 2026) — focus ring: 2px / opacità più basse (meno “alone” blu).
 */

:root {
    --skeleton-bg-start: var(--border-color);
    --skeleton-bg-middle: var(--bg-tertiary);
    --skeleton-bg-end: var(--border-color);
    --skeleton-shade-start: #374151;
    --skeleton-shade-middle: #4B5563;
    --skeleton-shade-end: #374151;
    --skeleton-duration: 1.5s;
    --skeleton-timing: ease-in-out;
  /* Canonical app breakpoints (Bootstrap-aligned) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-sm-max: 575.98px;
  --breakpoint-md-max: 767.98px;
  --breakpoint-lg-max: 991.98px;
  --breakpoint-xl-max: 1199.98px;
  /* Full-HD+ gate for heavier effects (backdrop-filter, shadows) — align performance + tokens */
  --bp-ultrawide: 1920px;
  /* Legacy semantic alias: wide desktop threshold used by older docs/custom layouts */
  --breakpoint-xl-wide: 1280px;
  --color-primary-50: #e6fbff;
  --color-primary-100: #b3f3ff;
  --color-primary-200: #80ebff;
  --color-primary-300: #4de3ff;
  --color-primary-400: #26dcff;
  --color-primary-500: #31A2C9;
   --color-primary-600: #00b8d9;
   --color-primary-700: #0b8ab5;
   --color-primary-800: #008fb3;
   --color-primary-900: #006680;
   --color-secondary-50: #f0f4f8;
   --color-secondary-100: #d9e2ec;
   --color-secondary-200: #bcccdc;
   --color-secondary-300: #9fb3c8;
   --color-secondary-400: #829ab1;
   --color-secondary-500: #1e3a5f;
   --color-secondary-600: #1a3352;
   --color-secondary-700: #152b45;
  --color-secondary-800: #1a6680;
  --color-secondary-900: #166d8d;
  --color-accent-50: #f0f9e6;
  --color-accent-100: #d9f0c2;
  --color-accent-200: #c2e79d;
  --color-accent-300: #abde79;
  --color-accent-400: #96d555;
  --color-accent-500: #82C12C;
  --color-accent-600: #6BAA24;
  --color-accent-700: #5a9120;
  --color-accent-800: #4a771a;
  --color-accent-900: #3a5d14;
 --color-success: #82C12C;
 --color-success-light: #e8f5d9;
 --color-success-strong: #5c8b1c;
 --color-success-dark: var(--color-success-strong);

 --color-warning: #CC8500;
 --color-warning-light: #E89800;
 --color-warning-strong: #B37700;
 --color-warning-dark: var(--color-warning-strong);

 --color-error: var(--color-danger);
 --color-error-light: #fee2e2;
 --color-error-strong: #dc2626;
 --color-error-dark: var(--color-error-strong);

 --color-danger: #f44336;
 --color-danger-light: #ffebee;
 --color-danger-strong: #d32f2f;
 --color-danger-dark: var(--color-danger-strong);

 --color-info: var(--color-secondary-600);
 --color-info-light: #e6f7fc;
 --color-info-strong: #166d8d;
 --color-info-dark: var(--color-info-strong);
  --color-neutral-50: #f9fafb;
  --color-neutral-100: var(--bg-tertiary);
  /* Concrete value: avoid cycle with --border-color -> --color-neutral-200. */
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-500: #64748b;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  /* Concrete value: must not alias --text-primary (that token references neutral-900 → cycle). */
  --color-neutral-900: #111827;
  --color-neutral-1000: #0a0a0a;
  /* Residual hardcoded colors migration (phase 4) */
  --color-migration-slate-750: #2c3e50;
  --color-migration-indigo-500: #667eea;
  --color-migration-orange-500: #ff6b35;
  --color-migration-blue-500: #3498db;
  --color-migration-blue-600: #2980b9;
  --color-migration-violet-600: #764ba2;
  --color-migration-indigo-400: #6c63ff;
  --color-migration-blue-600-strong: #2563eb;
  --color-migration-slate-600: #334155;
  --color-migration-slate-500: #7f8c8d;
  --color-migration-slate-400: #95a5a6;
  --color-migration-info-50: #eff6ff;
  --color-migration-info-100: #bfdbfe;
  --color-migration-surface-100: #e8f4f8;
  --color-migration-warning-500: #ffc107;
  --color-migration-border-100: #e9ecef;
  --color-migration-border-200: #dee2e6;
  --color-migration-border-300: #e0e0e0;
  --color-migration-border-350: #ddd;
  --color-migration-border-400: #bdc3c7;
  --color-migration-slate-300: #cbd5e1;
  --color-migration-slate-450: #94a3b8;
  --color-migration-slate-850: #1e293b;
  --color-migration-gray-900: #212529;
  --color-migration-info-75: #e3f2fd;
  --color-migration-info-150: #e0f2fe;
  --color-migration-success-700: #15803d;
  --color-migration-success-50: #f0fdf4;
  --color-migration-warning-100: #ffe8cc;
  --color-migration-warning-400: #ffb020;
  --color-migration-warning-450: #ffb800;
  --color-migration-warning-900: #664d00;
  --color-migration-danger-500: #ef4444;
  --color-migration-warning-50: #fef3c7;
  --color-migration-transparent-primary: #7cc9e500;
  /* Text colors - Light theme (default) */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-700);
  /* Muted = de-emphasized copy (captions, hints); secondary = still readable body — must not be identical */
  --text-muted: var(--color-neutral-500);
 --text-on-solid: var(--color-white);
 --text-on-dark: var(--text-on-solid);
  --text-on-primary: var(--color-white);
  
  --text-link: var(--color-primary-500);
  --text-link-hover: var(--color-primary-600);
  /* Background colors - Light theme (default) */
  --bg-primary: var(--color-white);
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-sidebar: var(--text-primary);
  --bg-card: var(--color-white);
  
  --bg-overlay: var(--surface-overlay-50);
  --bg-overlay-light: rgba(255, 255, 255, 0.92);
  --border-color: var(--color-neutral-200);
  --border-light: #f0f0f0;
 --border-strong: #d1d5db;
 --border-dark: var(--border-strong);
  --border-focus: var(--color-primary-500);
  /* Semantic UI surface (new modules: prefer these over raw neutral hex) */
  --color-ui-text: var(--text-primary);
  --color-ui-text-secondary: var(--text-secondary);
  --color-ui-text-muted: var(--text-muted);
  --color-ui-bg: var(--bg-primary);
  --color-ui-bg-muted: var(--bg-secondary);
  --color-ui-border: var(--border-color);
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
  /* Aliases: capri-admin-core / legacy utilities → same values as canonical tokens (admin loads this file first). */
  --font-primary: var(--font-family-base);
  --brand-primary: var(--color-primary);
  --brand-secondary: var(--color-primary-500);
  --status-success: var(--color-success);
  --status-error: var(--color-danger);
  --status-warning: var(--color-warning);
  --status-info: var(--color-info);
  --neutral-100: var(--color-neutral-100);
  --neutral-400: var(--color-neutral-400);
  --neutral-500: var(--color-neutral-500);
  --neutral-900: var(--color-neutral-900);
  /* Type ramp: 16px body (readable default); sm/xs for dense UI; larger steps unchanged for heroes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.953rem;
  --font-size-4xl: 2.441rem;
  --font-size-5xl: 3.052rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  /* Semantic type aliases (new CSS: prefer --text-*; keeps one mental model) */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-md: var(--font-size-md);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  --text-3xl: var(--font-size-3xl);
  --text-4xl: var(--font-size-4xl);
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  /* Semantic spacing (4px grid); legacy --space-* numeric aliases unchanged below */
  --sp-2xs: var(--spacing-1);
  --sp-xs: var(--spacing-2);
  --sp-sm: var(--spacing-3);
  --sp-md: var(--spacing-4);
  --sp-lg: var(--spacing-6);
  --sp-xl: var(--spacing-8);
  --sp-2xl: var(--spacing-12);
  --sp-3xl: var(--spacing-16);
  --radius-none: 0;
  --radius-sm: 4px;
  /* base = md (same token; use --radius-md in new code) */
  --radius-base: var(--radius-md);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  /* 2xl = xl (duplicate name only for backward compat) */
  --radius-2xl: var(--radius-xl);
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-xs: var(--shadow-sm);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  --shadow-base: var(--shadow-md);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  /* Semantic elevation (prefer these in new CSS; xl/2xl remain legacy aliases) */
  --shadow-soft: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-strong: var(--shadow-lg);
  --shadow-xl: var(--shadow-lg);
  --shadow-focus: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --transition-fast: 0.15s;
  --transition-base: var(--duration-base) var(--ease-in-out);
    --transition-slow: 0.3s;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --z-base: 1;
  --z-dropdown: 1044;
  --z-sticky: 1020;
  --z-fixed: 1028;
  --z-mobile-action-bar: 1035;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-popover: 1070;
  --z-tooltip: 1080;
  --z-toast: 1090;
  --z-sidebar: 1022;
  --z-navbar: 1030;
  --z-navbar-overlay: 1025;
  --z-sidebar-flyout: 1032;
  --z-navbar-dropdown: 1046;
  /* Teleported table/overflow dropdowns (body): above chrome, strictly below modal stack */
  --z-dropdown-teleported: 1048;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 88px;
  --navbar-height: 56px;
  --container-max-width: 1320px;
  --content-max-width: 1140px;
  --btn-padding-y: var(--spacing-2);
  --btn-padding-x: var(--spacing-4);
  --btn-padding-sm-y: var(--spacing-1-5);
  --btn-padding-sm-x: var(--spacing-3);
  --btn-padding-lg-y: var(--spacing-3);
  --btn-padding-lg-x: var(--spacing-5);
  --btn-border-radius: var(--radius-md);
  --card-padding: var(--card-padding-default);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--elevation-card);
  --input-height: var(--form-input-height);
  --input-height-sm: var(--form-input-height-sm);
  --input-height-lg: var(--form-input-height-lg);
  --input-padding-y: var(--form-input-padding-y);
  --input-padding-x: var(--form-input-padding-x);
  --input-border-radius: var(--form-input-border-radius);
  --table-cell-padding-y: var(--spacing-3);
  --table-cell-padding-x: var(--spacing-4);
  /* Banda icone ordinamento DataTables BS5 — usare solo padding-inline-end (no stack con padding-right vendor). */
  --dt-sort-gutter-end: 1.75rem;
  --table-border-color: var(--border-color);
  --modal-border-radius: var(--radius-lg);
  --modal-padding: var(--modal-padding-y) var(--modal-padding-x);
  --modal-header-padding: var(--spacing-3) var(--modal-padding-x);
  --modal-footer-padding: var(--spacing-3) var(--modal-padding-x);
  --theme-primary: var(--color-primary-500, var(--color-primary));
  --theme-secondary: var(--color-secondary-500, var(--color-primary));
  --theme-accent: var(--color-accent-500, var(--color-accent));
  --theme-bg-main: var(--bg-page, var(--bg-secondary));
  --theme-bg-card: var(--bg-card, var(--bg-primary));
  --theme-bg-sidebar: var(--color-dark-900, var(--color-neutral-900));
  --theme-bg-header: var(--bg-primary);
  --theme-text-primary: var(--text-primary);
  --theme-text-secondary: var(--text-secondary);
  --theme-text-on-sidebar: var(--navbar-dark-text);
  --theme-border: var(--border-color, var(--color-neutral-200));
  --container-max-width-sm: 900px;
  --container-max-width-md: 1100px;
  --container-max-width-lg: 1200px;
  --container-max-width-xl: 1200px;
  --container-max-width-xxl: 1320px;
  --layout-content-max: var(--container-max-width);
  --layout-content-max-wide: 1440px;
  /* Guest .page-container--narrow / --wide — must stay defined (layout-guest.css) */
  --container-max-width-narrow: 1000px;
  --container-max-width-wide: var(--layout-content-max-wide);
  --layout-content-gap: var(--spacing-6);
  --layout-sidebar-grid: 6fr 4fr;
  --layout-main-percent: 60%;
  --layout-sidebar-percent: 40%;
  --color-primary: #31A2C9;
  --color-primary-subtle: var(--color-primary-50);
   --color-secondary: #1e3a5f;

  --color-accent: #82C12C;
  --color-success-50: #f0f9e6;
  --color-success-100: #d9f0c2;
  --color-success-200: #c2e79d;
  --color-success-500: #82C12C;
  --color-success-600: #6BAA24;
  --color-success-700: #5a9120;
 --color-success-emphasis: #4a7516;
 --color-success-darker: var(--color-success-emphasis);
  --color-warning-50: #fff4e5;
  --color-warning-100: #ffe4b3;
  --color-warning-200: #ffd480;
  --color-warning-500: #CC8500;
  --color-warning-600: #B37700;
  --color-warning-700: #9a6600;
 --color-warning-emphasis: #9a6600;
 --color-warning-darker: var(--color-warning-emphasis);
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-500: var(--color-danger);
  --color-error-600: #dc2626;
  --color-error-700: var(--color-danger-700);
 --color-error-emphasis: var(--color-danger-700);
 --color-error-darker: var(--color-error-emphasis);
  --color-info-50: #e6f7fc;
  --color-info-100: #b3e5f2;
  --color-info-200: #80d3e9;
  --color-info-500: var(--color-secondary-600);
  --color-info-600: var(--color-secondary-700);
  --color-info-700: #166d8d;
 --color-danger-emphasis: #b71c1c;
 --color-danger-darker: var(--color-danger-emphasis);
  --color-danger-500: var(--color-danger);
  --color-danger-600: var(--color-danger-strong);
  --color-danger-700: var(--color-danger-emphasis);
  --color-primary-rgb: 49, 162, 201;
  --color-secondary-rgb: 30, 58, 95;
  --color-danger-rgb: 244, 67, 54;
  --color-accent-rgb: 130, 193, 44;
  --color-success-rgb: var(--color-accent-rgb);
  --color-warning-rgb: 204, 133, 0;
  --color-material-blue: #4285F4;
  --color-material-cyan: #00BCD4;
  --color-material-deep-orange: #FF5722;
  --color-material-purple: #9C27B0;
  --color-material-blue-grey: #607D8B;
  --color-material-light-blue: #03A9F4;
  --color-material-pink: #E91E63;
  --color-material-grey: #9E9E9E;
  --color-material-brown: #795548;
  --color-material-teal: #009688;
  --color-material-light-green: #8BC34A;
  --color-material-red: #F44336;
  --color-material-yellow: #FFD700;
  --color-material-deep-purple: #673AB7;
  --color-material-amber: #FFD54F;
 --color-material-blue-700: #0277BD;
 --color-material-blue-800: #01579B;
 --color-material-blue-dark: var(--color-material-blue-700);
 --color-material-blue-darker: var(--color-material-blue-800);
  --color-material-orange: #FFB300;
  --color-material-indigo: #3F51B5;
  --color-neutral-0: var(--color-white);
  --color-neutral-950: #0a0a0a;
  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-neutral-900);
 --color-neutral-ink-800: var(--color-neutral-800);
 --color-neutral-ink-900: var(--color-neutral-900);
 --color-dark-800: var(--color-neutral-ink-800);
 --color-dark-900: var(--color-neutral-ink-900);
  --color-light-100: var(--color-neutral-50);
  --color-light-500: var(--color-neutral-0);
  --color-white: #ffffff;
  --color-black: #000000;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --text-disabled: #d1d5db;
  --text-inverse: var(--color-white);
  --bg-page: #F7F7F7;
  --bg-dark: var(--text-primary);
  --sidebar-overlay-bg: rgba(0, 0, 0, 0.35);
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(var(--color-primary-rgb), 0.08);
  --bg-light-overlay-10: rgba(255, 255, 255, 0.1);
  --bg-light-overlay-20: rgba(255, 255, 255, 0.2);
  --bg-light-overlay-25: rgba(255, 255, 255, 0.25);
  --bg-light-overlay-30: rgba(255, 255, 255, 0.3);
  --color-border: var(--border-color);
  --border-color-subtle: rgba(0, 0, 0, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-subtle-dark: var(--bg-light-overlay-10);
  --border-light-overlay-20: rgba(255, 255, 255, 0.2);
  --border-light-overlay-40: rgba(255, 255, 255, 0.4);
  --border-dark-overlay-10: var(--surface-overlay-10);
  --text-secondary-wcag: #4b5563;
  --text-tertiary: var(--color-gray-500);
  --text-tertiary-wcag: #4b5563;
  --color-primary-text: #0b8ab5;
  --z-zero: 0;
  --z-card-control: 2;
  --z-content: 10;
  --z-content-top: 100;
  --z-content-above: 50;
  --z-popover-in-content: 1070;
  /* Guest hero guests picker: below modal stack (1050+) — was 1069/1070 and covered auth modals */
  --z-guests-selector: var(--z-offcanvas);
  --z-guests-backdrop: var(--z-offcanvas-backdrop);
  --z-sidebar-backdrop: 1019;
  --z-table-sticky: 10;
  --z-table-sticky-data: 8;
  --z-table-sticky-header: 9;
  --z-table-sticky-top: 10;
  --z-raised: 1;
  --z-mobile-cta: 1025;
  --z-header: 1030;
  --z-banner: 1030;
  --z-cookie-banner: 1035;
  --z-offcanvas-backdrop: 1040;
  --z-offcanvas: 1045;
  --z-mobile-modal: 1045;
  --z-drawer: 1045;
  --z-booking-recap-modal: 1055;
  --z-modal-close: 1060;
  --z-modal-nested: 1065;
  /* Fixed context menus / command surfaces (components/dropdown.css .ce-context-menu) */
  --z-context-menu: var(--z-modal-nested);
  --z-popover-on-modal: 1070;
  --z-fab: 1085;
  --z-notification: 1090;
  --z-alert: 1090;
  --z-filter-bar: var(--z-content-top);
  --z-filter-pills: 1019;
  --z-chat-sidebar-mobile: var(--z-sidebar);
  --z-chat-overlay: calc(var(--z-chat-sidebar-mobile) - 1);
  --z-chat-sticky: var(--z-content-above);
  --z-chat-dropdown: var(--z-dropdown);
  /* Chat layer tokens (used by chat-unified.css, user-chat.css) */
  --z-chat-base: var(--z-sidebar); /* 1022 — chat panel root */
  --z-chat-header: calc(var(--z-chat-base) + 1); /* 1023 — sticky chat header */
  /* Fixed-bottom action bars (owner-booking-mobile, mobile CTAs above cookie banner) */
  --z-fixed-bottom: 1038;
  /* AdminLTE shell stacking — keep in sync with admin-layout-bs5-bridge.css */
  --z-admin-sidebar: 1038;       /* .main-sidebar fixed panel */
  /* Navbar above sidebar so header dropdowns are not painted under .main-sidebar (desktop). */
  --z-admin-header: 1039;        /* .main-header when navbar-fixed */
  --z-admin-sidebar-mobile: 1031; /* sidebar drawer on mobile */
  --z-admin-sidebar-overlay: 1037; /* #sidebar-overlay push-menu backdrop */
  /* Z-index stack (smoke + third-party-z-index-overrides): navbar/header ~1030 → offcanvas ~1045 → overlay/modal ~1050–1065 → popover-on-modal 1070 → datepicker 1095 → gallery 1100 → lightbox 1105 → skip-link 1110. SweetAlert2: vedi third-party-z-index-overrides.css (sopra toast, sotto lightbox se necessario). */
  --z-datepicker: 1095;
  --z-gallery: 1100;
  --z-lightbox: 1105;
  --z-skip-link: 1110;
  /* Google Maps Places Autocomplete (.pac-container) — above AdminLTE / stacked UI */
  --z-google-places-autocomplete: 10050;
  --z-mobile-backdrop: 1040;
  --z-mobile-close: 1060;
  --z-fixed-nav: 1030;
  --z-negative: -1;
  --z-overlay: 1050;
  --z-booking-recap-modal-content: 1055;
  --breakpoint-xs: 0;
  --mobile-breakpoint: 768px;

  --bp-nav-compact: 380px;
  --navbar-user-name-max-width: 120px;
  --navbar-dropdown-width: 280px;
  --bp-xs: 360px;
  --bp-xs-max: calc(var(--bp-xs) - 0.02px);
   --bp-detail-compact: 400px;
  --bp-detail-compact-max: calc(var(--bp-detail-compact) - 0.02px);
  --bp-sm: var(--breakpoint-sm);
  --bp-640: 640px;
  --bp-md: var(--breakpoint-md);
  --bp-lg: var(--breakpoint-lg);
  --bp-xl: var(--breakpoint-xl);
  --bp-chat-xs: 480px;
  /* Narrow phones / compact UI (max-width queries: below --bp-chat-xs) */
  --bp-chat-xs-max: calc(var(--bp-chat-xs) - 0.02px);
  /* Owner tables toolbar / tight two-column break */
  --bp-520: 520px;
  /* Landscape short viewport (listing CTA, gallery) */
  --bp-layout-landscape-short-h: 600px;
  --bp-chat-mobile-max: calc(var(--bp-lg) - 0.02px);
  --bp-chat-tablet-max: calc(var(--bp-md) - 0.02px);
  /* Media query max-width variants for tokenized breakpoints (tier max = next min − 0.02px) */
  --bp-sm-max: var(--breakpoint-sm-max);
  --bp-md-max: var(--breakpoint-md-max);
  --bp-lg-max: var(--breakpoint-lg-max);
  --bp-xl-max: var(--breakpoint-xl-max);
  --bp-2xl-max: calc(var(--breakpoint-2xl) - 0.02px);
  --chat-overlay-bg: var(--surface-overlay-40);
  --chat-overlay-bg-strong: var(--surface-overlay-60);
  --chat-border-soft: color-mix(in srgb, var(--color-neutral-500) 24%, transparent);
  --chat-separator-border: color-mix(in srgb, var(--color-neutral-500) 30%, transparent);
  --chat-message-border-soft: color-mix(in srgb, var(--color-neutral-500) 16%, transparent);
  --chat-sidebar-item-border: color-mix(in srgb, var(--color-neutral-500) 24%, transparent);
  --chat-sidebar-item-active-border: color-mix(in srgb, var(--color-primary) 45%, transparent);
  --chat-sidebar-scrollbar-thumb: color-mix(in srgb, var(--color-neutral-500) 45%, transparent);
  --chat-header-divider-shadow: color-mix(in srgb, var(--color-neutral-900) 4%, transparent);
  --chat-input-divider-shadow: color-mix(in srgb, var(--color-neutral-500) 20%, transparent);
  --chat-danger-bg-soft: color-mix(in srgb, var(--color-error) 6%, transparent);
  --chat-danger-border-soft: color-mix(in srgb, var(--color-error) 25%, transparent);
  --chat-day-separator-bg: color-mix(in srgb, var(--color-white) 92%, transparent);
  --chat-highlight-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);

  --chat-shell-min-height: 480px;
  --chat-shell-min-height-mobile: 420px;
  --chat-shell-max-height: 920px;
  --chat-shell-offset-desktop: 140px;
  --chat-shell-offset-tablet: 108px;
  --chat-shell-offset-mobile: 84px;

  /* ========================================
     MINIMAL DESIGN CORE (non-breaking aliases)
     Notion/Airbnb style baseline for new UI work.
     ======================================== */
  /* Brand CTAs use 500; 600 is hover/emphasis in components — DS “primary” matches marketing */
  --ds-color-primary: var(--color-primary-500);
  --ds-color-secondary: var(--color-secondary-600);
  --ds-color-background: var(--bg-primary);
  --ds-color-surface: var(--bg-card);
  --ds-color-text-primary: var(--text-primary);
  --ds-color-text-secondary: var(--text-secondary);
  --ds-color-text-muted: var(--text-muted);
  --ds-color-border: var(--border-color);
  --ds-color-success: var(--color-success-600);
  --ds-color-warning: var(--color-warning-600);
  --ds-color-danger: var(--color-danger-600);

  --ds-space-1: var(--spacing-1);   /* 4px  */
  --ds-space-2: var(--spacing-2);   /* 8px  */
  --ds-space-3: var(--spacing-3);   /* 12px */
  --ds-space-4: var(--spacing-4);   /* 16px */
  --ds-space-6: var(--spacing-6);   /* 24px */
  --ds-space-8: var(--spacing-8);   /* 32px */
  --ds-space-12: var(--spacing-12); /* 48px */
  --ds-space-16: var(--spacing-16); /* 64px */

  --ds-font-family: var(--font-family-base);
  --ds-font-size-sm: var(--font-size-sm);
  --ds-font-size-base: var(--font-size-base);
  --ds-font-size-lg: var(--font-size-lg);
  --ds-font-size-heading: var(--font-size-2xl);
  --ds-line-height-tight: var(--line-height-tight);
  --ds-line-height-normal: var(--line-height-normal);
  --ds-line-height-relaxed: var(--line-height-relaxed);

  --ds-radius-sm: var(--radius-sm);
  --ds-radius-md: var(--radius-md);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-full: var(--radius-full);

  --ds-shadow-sm: var(--shadow-soft);
  --ds-shadow-md: var(--shadow-medium);
  --ds-shadow-focus: var(--shadow-focus);

  /* Inputs — public aliases (SSOT rules in form-system-unified.css) */
  --ds-input-min-height: var(--form-input-height, var(--touch-target-min));
  --ds-input-padding-y: var(--form-input-padding-y, var(--spacing-2));
  --ds-input-padding-x: var(--form-input-padding-x, var(--spacing-3));
  --ds-input-border-color: var(--form-input-border-color, var(--border-color));
  --ds-input-radius: var(--form-input-radius, var(--radius-md));
  --ds-input-bg: var(--bg-input, var(--bg-primary));
  --ds-input-text: var(--text-primary);
  --ds-input-font-size: var(--form-input-font-size, var(--font-size-base));
  --ds-input-placeholder: var(--text-tertiary, var(--text-secondary));

  /* Cards — public aliases (SSOT rules in card-system-unified.css) */
  --ds-card-bg: var(--bg-card);
  --ds-card-border-color: var(--card-border-color, var(--border-color));
  --ds-card-radius: var(--card-border-radius, 16px);
  --ds-card-shadow: var(--elevation-card);
  --ds-card-shadow-hover: var(--card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.08));
  --ds-card-body-padding: var(--card-padding-default, var(--spacing-5));
  --ds-card-header-padding: var(--card-header-padding, var(--spacing-4) var(--spacing-5));
  --ds-card-footer-padding: var(--card-footer-padding, var(--spacing-4) var(--spacing-5));

  /* Surfaces — page canvas vs panels (maps to layout/theme tokens) */
  --ds-surface-canvas: var(--bg-page, var(--bg-secondary));
  --ds-surface-elevated: var(--bg-card);
  --ds-surface-muted: var(--bg-secondary);
  --ds-border-subtle: var(--border-subtle, var(--border-color));

  /* Tables — public aliases. Hover fill SSOT = --capri-table-row-hover-bg (sola variante da usare in CSS componenti).
     --ds-table-row-hover, --table-row-hover, --owner-table-row-hover-bg: alias verso SSOT (legacy / tema), non duplicare valori altrove. */
  --ds-table-wrapper-bg: var(--bg-card);
  --ds-table-container-radius: var(--table-container-radius, var(--radius-lg));
  --ds-table-container-shadow: var(--table-container-shadow, var(--shadow-sm));
  --ds-table-header-bg: var(--table-header-bg);
  --ds-table-header-color: var(--table-header-color);
  --ds-table-border-color: var(--table-border-color, var(--border-color));
  --ds-table-divider: var(--border-subtle, var(--table-border-color, var(--border-color)));
  --ds-table-cell-padding-y: var(--table-cell-padding-y);
  --ds-table-cell-padding-x: var(--table-cell-padding-x);
  --ds-table-cell-padding-y-mobile: var(--table-cell-padding-y-mobile);
  --ds-table-cell-padding-x-mobile: var(--table-cell-padding-x-mobile);
  --ds-table-cell-text: var(--table-cell-primary-color);
  --ds-table-cell-meta: var(--table-cell-secondary-color);
  --ds-table-row-hover: var(--capri-table-row-hover-bg);
  --ds-table-row-active: var(--bg-tertiary);
  --ds-table-stripe-bg: var(--table-stripe-bg);

  /* Owner ui-table-card (mobile): niente slate rgba hardcoded — ombre da overlay (dark: ridefinire --surface-overlay-*) */
  --ui-table-card-shadow: 0 10px 26px var(--surface-overlay-10);
  --ui-table-card-shadow-hover: 0 14px 32px var(--surface-overlay-20);

  /* Focus — outline ring (buttons, links, controls using outline, not box-shadow) */
  --ds-focus-outline-width: 2px;
  --ds-focus-outline-offset: 2px;
  --ds-focus-outline-color: var(--focus-ring-color, var(--color-primary-500, var(--color-primary)));

  /* Forms — focus + validation (SSOT rules: form-system-unified.css) */
  --ds-form-focus-border: var(--input-border-focus, var(--color-primary-500, var(--color-primary)));
  --ds-form-focus-ring: 0 0 0 2px rgba(var(--color-primary-rgb, 49, 162, 201), 0.1);
  --ds-form-invalid-border: var(--form-error-color-token, var(--color-danger));
  --ds-form-invalid-ring: 0 0 0 2px rgba(var(--color-danger-rgb, 220, 53, 69), 0.16);
  --ds-form-valid-border: var(--color-success);
  --ds-form-error-text: var(--form-error-color-token, var(--color-danger));

  --chat-sidebar-width: 320px;
  --chat-sidebar-width-mobile: min(340px, 88vw);
  --chat-header-height: var(--spacing-16);
  --chat-header-padding-x: var(--spacing-4);
  --chat-header-padding-x-mobile: var(--spacing-3);
  --chat-messages-padding: var(--spacing-4);
  --chat-messages-padding-mobile: var(--spacing-3);
  --chat-messages-gap: var(--spacing-3);
  --chat-composer-min-height: calc(var(--touch-target-min) + var(--spacing-3));
  --chat-composer-gap: var(--spacing-2);
  --chat-composer-gap-mobile: var(--spacing-1);
  --chat-composer-padding-y: var(--spacing-3);
  --chat-composer-padding-x: var(--spacing-4);
  --chat-composer-padding-y-mobile: var(--spacing-2);
  --chat-composer-padding-x-mobile: var(--spacing-3);
  --chat-composer-input-padding-x: var(--spacing-4);
  --chat-sidebar-header-height: var(--spacing-16);
  --chat-sidebar-search-height: 58px;
  --chat-sidebar-list-max-offset: 180px;
  --chat-avatar-size: var(--spacing-10);
  --chat-online-dot-size: 10px;
  --chat-unread-badge-size: var(--spacing-5);
  --chat-empty-min-height: 200px;
  --chat-active-indicator-width: 3px;
  --chat-service-input-max: 120px;
  --chat-service-input-max-sm: 100px;
  --chat-bubble-max-mobile: 85%;
  --chat-bubble-max-desktop: 65%;

  --chat-font-size-base: var(--font-size-base);
  --chat-font-size-sm: var(--font-size-sm);
  --chat-font-size-xs: var(--font-size-xs);
  --chat-font-size-input: var(--font-size-lg);

  --chat-radius-bubble: var(--radius-xl);
  --chat-radius-input: var(--radius-lg);
  --chat-radius-card: var(--radius-md);
  --chat-shadow-soft: var(--shadow-sm);
  --chat-shadow-elevated: var(--shadow-lg);
  --bp-grid-sm: var(--bp-sm);
  --bp-grid-md: var(--bp-md);
  --bp-grid-lg: var(--bp-lg);
  --bp-grid-xl: 1440px;
  --bp-guest-2col: var(--bp-md); /* Onda 6: allineato tier md (768px), no più 744px orfano */
  --bp-guest-3col: 1128px;
  --bp-guest-4col: 1440px;
  --card-grid-max-column: 420px;
  --card-grid-min-column-guest: 181px;
  --font-family-heading: "Georgia", "Times New Roman", serif;
  --font-family-display: var(--font-family-heading);
  --font-size-2xs: 0.625rem;
  /* Between “large” and xl (lg is now 1.125rem — lg-plus = xl) */
  --font-size-lg-plus: var(--font-size-xl);
  --font-size-h2: var(--font-size-2xl);
  --font-size-6xl: 3.815rem;
  --font-size-lead: var(--font-size-md);
  --font-weight-extrabold: 800;
  --line-height-none: 1;
  --line-height-snug: 1.375;
  --line-height-loose: 2;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 8px;
  --spacing-2-5: 8px;
  --spacing-3-5: 12px;
  --spacing-4-5: 16px;
  /* @deprecated Epic D2 — duplicate of spacing-6/8/10/12/16; prefer --spacing-6 etc. or --sp-lg */
  --spacing-7: 24px;
  --spacing-9: 32px;
  --spacing-11: 40px;
  --spacing-14: 48px;
  /* @deprecated both = 96px; prefer --spacing-20 (80px) or --spacing-24 for one canonical 96px step */
  --spacing-24: 96px;
  --spacing-28: 96px;
  --spacing-32: 128px;
  --spacing-negative-1: -4px;
  --spacing-negative-2: -8px;
  --spacing-negative-4: -16px;

  /* @deprecated Epic D1 — alias spacing; prefer --spacing-* (core). Sunset: Phase C after grep-clean. */
  --space-0: var(--spacing-0);
  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --space-3: var(--spacing-3);
  --space-4: var(--spacing-4);
  /* intentional: legacy --space-5 step = 24px (= --spacing-6), not --spacing-5 */
  --space-5: var(--spacing-6);
  --space-6: var(--spacing-8);
  --space-7: var(--spacing-10);
  --space-8: var(--spacing-12);
  --space-xxs: var(--spacing-1);
  --space-xs: var(--spacing-2);
  --space-s: var(--spacing-3);
  --space-m: var(--spacing-4);
  --space-l: var(--spacing-6);
  --space-xl: var(--spacing-8);
  --space-2xl: var(--spacing-12);
  --space-3xl: var(--spacing-16);
  --space-4xl: var(--spacing-20);

  /* @deprecated Epic D1 — t-shirt aliases; prefer --spacing-* numeric scale. */
  --spacing-xs: var(--spacing-2);
  --spacing-sm: var(--spacing-3);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-12);
  --spacing-3xl: var(--spacing-16);
  --container-sm: 900px;
  --container-md: 1100px;
  --container-lg: 1200px;
  --container-xl: 1200px;
  --container-xxl: 1320px;
  --radius-xs: 2px;
  --radius-3xl: 24px;
  --radius-s: var(--radius-sm);
  --radius-m: var(--radius-md);
  --radius-l: var(--radius-lg);
  --shadow-2xl: var(--shadow-lg);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-color: var(--surface-overlay-10);
  --shadow-focus-primary: 0 4px 12px rgba(var(--color-primary-rgb), 0.22);
  --shadow-focus-error: 0 0 0 2px rgba(var(--color-danger-rgb), 0.12);
  --shadow-focus-success: 0 0 0 2px rgba(var(--color-accent-rgb), 0.12);
  --shadow-s: var(--shadow-sm);
  --shadow-m: var(--shadow-md);
  --shadow-l: var(--shadow-lg);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary-500);
  /* Alias used by button-system-unified + pagination (outline focus ring) */
  --color-focus-ring: var(--focus-ring-color);
  --focus-ring-color-error: var(--color-error);
  --focus-ring-color-success: var(--color-success);
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset) var(--bg-primary);
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  --icon-decorative-opacity: 0.9;
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-700) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-700) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-700) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger-500) 0%, var(--color-danger-700) 100%);
  --gradient-promoted: #f59e0b;
  --color-promoted: #f59e0b;
  --color-promoted-text: #451a03;
  --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  --transition-modal: var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms var(--ease-in-out), 
                       background-color 150ms var(--ease-in-out), 
                       border-color 150ms var(--ease-in-out);
  --transition-opacity: opacity 150ms var(--ease-in-out);
  --transition-transform: transform 150ms var(--ease-in-out);
  --transition-all: all 200ms var(--ease-in-out);
  --transition-interaction: transform var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out);
  --navbar-height-mobile: 56px;
  --navbar-height-tablet: 64px;
  --navbar-height-desktop: 80px;
  --header-height: var(--navbar-height-desktop);
  --header-padding-x-desktop: var(--spacing-6);
  --header-padding-x-tablet: var(--spacing-4);
  --header-padding-x-mobile: var(--spacing-3);
  --footer-height: 60px;
  --hero-min-height-desktop: 600px;
  --hero-min-height-tablet: 400px;
  --hero-padding-y-desktop: 64px;
  --hero-padding-y-tablet: 48px;
  --hero-padding-y-mobile: 32px;
  --hero-padding-x-desktop: 48px;
  --hero-padding-x-tablet: 32px;
  --hero-padding-x-mobile: 16px;
  --sidebar-width-desktop: 280px;
  --sidebar-width-tablet: 240px;
  --sidebar-padding-desktop: var(--spacing-6);
  --sidebar-padding-tablet-mobile: var(--spacing-4);
  --table-row-height-desktop: 52px;
  --table-row-height-tablet: 40px;
  --table-row-height-mobile: 36px;
  --mobile-cta-height: 72px;
  --listing-detail-cta-padding-bottom: 88px;
  --scroll-padding-top: calc(var(--navbar-height, 56px) + var(--spacing-4));
  --section-gap-desktop: var(--spacing-12);
  --section-gap-tablet: var(--spacing-8);
  --section-gap-mobile: var(--spacing-8);
  --section-gap-mobile-compact: var(--spacing-6);
  --container-max-conversion: 1440px;
  --card-radius-conversion: 12px;
  --card-radius-conversion-lg: 16px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px var(--surface-overlay-10);
  --card-hover-lift: -4px;
  --card-image-scale-hover: 1.03;
  --cta-min-height: 44px;
  --cta-min-width: 44px;
  --cta-border-radius: var(--radius-lg);
  --color-accent-cta: #FF6A3D;
  --color-accent-cta-hover: #E55A2D;
  --color-accent-cta-rgb: 255, 106, 61;
  --font-size-h1-mobile: 1.75rem;
  --font-size-h2-mobile: 1.5rem;
  --font-size-body-mobile: 1rem;
  --font-size-small-mobile: 0.8125rem;
  --modal-max-width-mobile: 480px;
  --modal-max-width-desktop: 640px;
  --modal-max-height-viewport: 70vh;
  --offcanvas-height-mobile: 90vh;
  --hero-min-height-mobile: clamp(280px, 40vh, 450px);
  --dropdown-width: max-content;
  --dropdown-z: 1070;
  --dropdown-min-width: 200px;
  --dropdown-max-width: 320px;
  --dropdown-max-width-notification: 400px;
  --dropdown-padding-x: var(--spacing-4);
  --dropdown-padding-y: var(--spacing-3);
  --dropdown-item-min-height: 40px;
  --dropdown-item-min-height-mobile: 44px;
  --dropdown-item-gap: var(--spacing-2);
  --dropdown-item-padding-x: var(--spacing-4);
  --dropdown-item-padding-y: var(--spacing-3);
  --dropdown-item-padding-x-mobile: var(--spacing-4);
  --dropdown-item-padding-y-mobile: var(--spacing-2-5);
  --dropdown-gap-between-items: 2px;
  --dropdown-border-radius: var(--radius-lg);
  --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --dropdown-bg: var(--bg-primary);
  --dropdown-text: var(--text-primary);
  --dropdown-hover-bg: var(--color-neutral-100);
  --dropdown-hover-bg-mobile: var(--color-neutral-100);
  --dropdown-active-bg: color-mix(in srgb, var(--color-primary-500) 7%, var(--bg-primary));
  --dropdown-active-color: var(--color-primary-700);
  --dropdown-active-accent: var(--color-primary-500);
  /* Bootstrap 5 dropdown selected/pressed — avoid default saturated primary fill */
  --bs-dropdown-link-active-bg: var(--dropdown-active-bg);
  --bs-dropdown-link-active-color: var(--dropdown-active-color);
  --dropdown-divider: var(--border-color);
  --dropdown-transition: 0.2s ease;
  --dropdown-animation-duration: 0.22s;
  --dropdown-min-width-mobile: 180px;
  --touch-target-min: 44px;
  --form-max-width: 640px;
  --btn-primary-bg: var(--color-primary-700);
  --btn-success-bg: var(--color-success-700);
  --btn-danger-bg: var(--color-danger-600);
  --btn-min-height: var(--form-input-height);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-transition: all var(--transition-fast);
  --elevation-card: var(--shadow-card);
  --elevation-card-hover: var(--shadow-card-hover);
  --card-padding-compact: var(--spacing-3);
  /* Default card body: 16px (was 20px) — denser, closer to Airbnb/Notion; use comfortable for marketing */
  --card-padding-default: var(--spacing-4);
  --card-padding-comfortable: var(--spacing-6);
  --card-padding-x: var(--spacing-4);
  --card-padding-sm: var(--spacing-4);
  --card-padding-lg: var(--card-padding-comfortable);
  --card-header-padding: var(--spacing-4) var(--card-padding-x);
  --card-body-padding: var(--card-padding);
  --card-footer-padding: var(--spacing-4) var(--card-padding-x);
  --card-shadow-hover: var(--elevation-card-hover);
  --card-border-color: var(--border-color);
  --card-bg: var(--bg-card);
  --card-stat-min-height: 120px;
  --card-kpi-min-height: 120px;
  --card-hero-min-height: 140px;
  --card-quick-action-min-height: 88px;
  --card-max-width-sm: 360px;
  --card-max-width-md: 420px;
  --card-max-width-lg: 520px;
  --icon-stat-size: 2.75rem;
  --form-scale-unit: 4px;
  --form-input-height: 40px;
  --form-input-height-sm: 34px;
  --form-input-height-lg: 44px;
  --form-input-height-mobile: 44px;
  --input-priority-width: 70px;
  --form-input-padding-y: var(--spacing-2);
  --input-textarea-min-height: 80px;
  --form-input-padding-x: var(--spacing-3);
  --form-input-font-size: var(--font-size-base);
  --form-input-line-height: 1.5;
  --form-input-border-radius: var(--radius-md);
  /* Alias used by form-system-unified.css (single name for radius SSOT) */
  --form-input-radius: var(--form-input-border-radius);
  --form-focus-ring-width: 3px;
  --form-focus-ring-offset: 2px;
  --form-label-font-size: var(--font-size-base);
  --form-label-line-height: 1.4;
  --form-label-margin-bottom: var(--spacing-1);
  --form-group-gap: var(--spacing-3);
  --form-group-gap-mobile: var(--spacing-2-5);
  --form-error-ring: 0 0 0 2px rgba(var(--color-danger-rgb), 0.15);
  --input-height-mobile: var(--form-input-height-mobile);
  --input-border-color: var(--border-color);
  --input-border-focus: var(--color-primary-500);
  --input-bg: var(--bg-primary);
  --input-placeholder: var(--color-neutral-600);
  --form-label-font-size-mobile: 1rem;
  --form-error-color: var(--color-danger-600);
  --form-error-color-token: var(--color-error);
  --table-cell-padding-y-mobile: var(--spacing-2);
  --table-cell-padding-x-mobile: var(--spacing-3);
  --table-header-bg: var(--bg-secondary);
  --table-header-font-weight: var(--font-weight-semibold);
  --table-header-font-size: var(--font-size-sm);
  /* Hover fill riga tabella — override su .owner-dashboard / .owner-area in owner-tables-datatables.css */
  --capri-table-row-hover-bg: var(--bg-hover);
  /* Owner dashboard: primary tint row hover (passed to color-mix % — avoid raw “0.055” in leaf CSS) */
  --capri-owner-primary-hover-mix: 5.5%;
  --table-row-hover: var(--capri-table-row-hover-bg);
  --table-stripe-bg: var(--bg-tertiary);
  /* Owner All Listings / All Bookings: zebra + hover (Onda D — un solo posto, no rgb sparsi nei profili) */
  --owner-table-stripe-bg: rgb(15 23 42 / 0.022);
  --owner-table-row-hover-bg: var(--capri-table-row-hover-bg);
  --table-header-border-width: 2px;
  --table-row-min-height: 48px;
  --table-col-min-width-desktop: 90px;
  --table-col-min-width-mobile: 70px;
  --table-col-actions-width: 120px;
  --table-col-thumb-width: 64px;
  --table-col-title-min: 120px;
  --table-col-title-max: 2fr;
  --table-col-status-width: 90px;
  --table-col-actions-width-balanced: 100px;
  --table-col-numeric-width: 100px;
  --table-col-min-width-lg: 140px;
  --table-container-radius: var(--radius-lg);
  --table-container-shadow: var(--shadow-sm);
  --table-header-color: var(--text-secondary-wcag, var(--text-secondary));
  --table-cell-primary-color: var(--text-primary);
  --table-cell-secondary-color: var(--text-secondary);
  --table-header-letter-spacing: 0.03em;
  --table-cell-line-height: 1.4;
  --table-scrollbar-gutter: stable;
  --section-gap: var(--section-gap-desktop);
  --grid-gap: var(--grid-gap-desktop);
  --grid-gap-md: var(--section-gap);
  --grid-gap-lg: var(--spacing-6);
  --grid-gap-desktop: var(--spacing-6);
  --grid-gap-tablet: var(--spacing-4);
  --grid-gap-mobile: var(--spacing-3);
  --row-gap-desktop: var(--spacing-6);
  --row-gap-mobile: var(--spacing-4);
  --bp-desktop-grid: var(--bp-grid-lg);
  --bp-xl-grid: var(--bp-grid-xl);
  --card-grid-min-column: 280px;
  --card-grid-min-column-sm: 220px;
  --section-padding-y: var(--spacing-6);
  --section-padding-y-xs: var(--spacing-4);
  --section-padding-y-sm: var(--spacing-4);
  --section-padding-y-md: var(--spacing-6);
  --section-padding-y-lg: var(--spacing-8);
  --section-padding-y-xl: var(--spacing-8);
  --section-padding-y-2xl: var(--spacing-10);
  --section-spacing-margin: var(--spacing-6);
  --section-spacing-margin-mobile: var(--spacing-5);
  --section-margin-mobile: var(--section-spacing-margin-mobile);
  --page-section-margin-bottom: var(--section-gap-desktop, 48px);
  --page-header-margin-bottom: var(--spacing-5);
  --page-padding-x: var(--spacing-4);
  --page-padding-x-mobile: var(--spacing-3);
  --layout-min-height-viewport: 100dvh;
  --content-area-min-height: 200px;
  --content-block-gap: var(--spacing-4);
  --heading-margin-bottom: var(--spacing-3);
  --heading-margin-bottom-lg: var(--spacing-4);
  --heading-margin-bottom-h1: var(--spacing-6);
  --heading-margin-bottom-h2: var(--spacing-5);
  --heading-margin-bottom-h3: var(--spacing-4);
  --heading-margin-bottom-h4: var(--spacing-3);
  --heading-margin-bottom-h5: var(--spacing-2);
  --heading-margin-bottom-h6: var(--spacing-2);
  --heading-font-weight-h1: var(--font-weight-bold);
  --heading-font-weight-h2: var(--font-weight-semibold);
  --heading-font-weight-h3: var(--font-weight-semibold);
  --heading-font-weight-h4: var(--font-weight-semibold);
  --heading-font-weight-h5: var(--font-weight-medium);
  --heading-font-weight-h6: var(--font-weight-medium);
  --card-padding-mobile: var(--spacing-4);
  --card-gap-mobile: var(--spacing-3);
  --booking-card-max-width: 480px;
  --booking-card-width-desktop: 420px;
  --booking-card-width-tablet: 560px;
  --booking-shell-max-width-tablet: 36rem;
  --booking-shell-max-width-tablet-wide: 52rem;
  --booking-card-padding-x: var(--spacing-6);
  --booking-card-padding-y: var(--spacing-6);
  --booking-card-padding-x-tablet: var(--spacing-4);
  --booking-card-padding-y-tablet: var(--spacing-4);
  --booking-card-padding-x-mobile: var(--spacing-4);
  --booking-card-padding-y-mobile: var(--spacing-4);
  --listing-detail-card-radius: var(--radius-lg);
  --listing-detail-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --listing-detail-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  --booking-card-radius: var(--listing-detail-card-radius);
  --booking-card-shadow: var(--listing-detail-card-shadow);
  --booking-card-shadow-hover: var(--listing-detail-card-shadow-hover);
  --booking-card-title-font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  --booking-card-price-font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  --booking-card-price-font-size-mobile: clamp(1rem, 5vw, 1.25rem);
  --booking-card-cta-min-height: 44px;
  --booking-card-cta-border-radius: var(--radius-lg);
  --listing-detail-sidebar-min-width: 360px;
  --listing-map-min-height-desktop: 380px;
  --listing-map-min-height-mobile: 280px;
  --table-thumb-size: 64px;
  --theme-color-meta: #1a1a1a;
  --input-quantity-max-height: 100px;
  --listing-detail-gallery-min-height-desktop: 640px;
  --listing-detail-gallery-min-height-tablet: 480px;
  --listing-detail-gallery-min-height-mobile: 360px;
  --listing-detail-gallery-padding-desktop: var(--spacing-8);
  --listing-detail-gallery-padding-tablet: var(--spacing-6);
  --listing-detail-gallery-padding-mobile: var(--spacing-4);
  --listing-detail-gallery-aspect-ratio: 16 / 9;
  --listing-detail-section-gap-desktop: var(--spacing-8);
  --listing-detail-section-gap-tablet: var(--spacing-6);
  --listing-detail-section-gap-mobile: var(--spacing-5);
  --listing-detail-gallery-gap-mobile: var(--spacing-2);
  --listing-detail-gallery-gap-tablet: var(--spacing-3);
  --listing-detail-gallery-gap-desktop: var(--spacing-3);
  --listing-detail-headline-max: 32px;
  --listing-detail-headline-min: 24px;
  --listing-header-bg: var(--bg-primary, var(--color-white));
  --listing-detail-body-size: 16px;
  --listing-detail-small-mobile: 14px;
  --listing-detail-review-card-gap-desktop: var(--spacing-4);
  --listing-detail-review-card-gap-tablet: var(--spacing-3);
  --listing-detail-review-card-gap-mobile: var(--spacing-3);
  --listing-detail-sidebar-width-desktop: 280px;
  --listing-detail-sidebar-width-tablet: 240px;
  --listing-detail-grid-aside-min: 320px;
  --listing-detail-grid-aside-max: 400px;
  --listing-detail-cta-padding: var(--spacing-3);
  --listing-detail-cta-padding-lg: var(--spacing-4);
  --listing-detail-cta-margin: var(--spacing-4);
  --listing-detail-cta-margin-lg: var(--spacing-6);
  --space-mobile-1: var(--spacing-1);
  --space-mobile-2: var(--spacing-2);
  --space-mobile-3: var(--spacing-3);
  --space-mobile-4: var(--spacing-4);
  --space-mobile-6: var(--spacing-6);
  --space-mobile-8: var(--spacing-8);
  --space-mobile-12: var(--spacing-12);
  --nav-tab-gap: var(--spacing-2);
  --nav-tab-padding-y: var(--spacing-3);
  --nav-tab-padding-x: var(--spacing-4);
  --nav-tab-padding-y-mobile: var(--spacing-2-5);
  --nav-tab-padding-x-mobile: var(--spacing-3);
  --nav-tab-font-size: var(--font-size-base);
  --nav-tab-font-size-mobile: var(--font-size-sm);
  --nav-tab-font-weight: var(--font-weight-medium);
  --nav-tab-font-weight-active: var(--font-weight-semibold);
  --nav-tab-min-height: var(--touch-target-min);
  --nav-tab-border-radius: var(--radius-md);
  --nav-tab-border-bottom-width: 2px;
  --nav-tab-active-indicator-width: 2px;
  --nav-tab-color: var(--text-primary);
  --nav-tab-color-hover: var(--color-primary-text);
  --nav-tab-color-active: var(--color-primary-600);
  --nav-tab-bg-hover: var(--bg-secondary);
  --nav-tab-bg-active: var(--bg-primary);
  --nav-tab-border-color: var(--border-color);
  --nav-tab-border-color-active: var(--bg-primary);
  --nav-tab-bg-active-filled: var(--color-primary-500);
  --nav-tab-color-active-filled: var(--color-neutral-0);
  --nav-tab-bg-hover-subtle: rgba(49, 162, 201, 0.06);
  --modal-padding-x: var(--spacing-5);
  --modal-padding-y: var(--spacing-4);
  --modal-backdrop-bg: var(--surface-overlay-50);
  --modal-shadow: 0 8px 24px var(--shadow-color);
  --modal-min-width: 320px;
  --modal-recap-max-height: 92dvh;
  --modal-animation-duration: 0.22s;
  --density-modal-padding: var(--modal-padding);
  --density-modal-padding-mobile: var(--spacing-3);
  --overlay-modal-xs: 360px;
  --overlay-modal-sm: 420px;
  --overlay-modal-md: 520px;
  --overlay-modal-lg: 640px;
  --overlay-modal-xl: 800px;
  --overlay-modal-full: 95vw;
  --overlay-modal-max-height: 90vh;
  --overlay-dropdown-sm: 220px;
  --overlay-dropdown-md: 280px;
  --overlay-dropdown-lg: 340px;
  --overlay-input-height: 40px;
  --overlay-input-padding: var(--spacing-3);
  --overlay-input-font-size: var(--font-size-md);
  --overlay-input-radius: 8px;
  --overlay-btn-height-sm: 32px;
  --overlay-btn-height: 40px;
  --overlay-btn-height-lg: 44px;
  --overlay-cta-min-height-mobile: 44px;
  --modal-dialog-sm: var(--overlay-modal-sm);
  --modal-dialog-md: var(--overlay-modal-md);
  --modal-dialog-lg: var(--overlay-modal-lg);
  --modal-dialog-xl: var(--overlay-modal-lg);
  --modal-dialog-2xl: var(--overlay-modal-xl);
  --modal-content-max-height: var(--overlay-modal-max-height);
  --accordion-button-min-height: 60px;
  --badge-padding-y: var(--spacing-1);
  --badge-padding-x: var(--spacing-2);
  --badge-font-size: var(--font-size-xs);
  --badge-border-radius: var(--radius-full);
  --badge-font-weight: var(--font-weight-semibold);
  --progress-height: 8px;
  --progress-height-sm: 4px;
  --progress-height-lg: 12px;
  --progress-border-radius: var(--radius-full);
  --progress-bg: var(--color-neutral-200);
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-photo: 4 / 3;
  --aspect-portrait: 3 / 4;
  --aspect-wide: 21 / 9;
  --aspect-ultrawide: 21 / 9;
  --aspect-cinematic: 2.35 / 1;
  --aspect-golden: 1.618 / 1;
  --listing-image-aspect-ratio: var(--aspect-video);
  --listing-image-object-fit: cover;
  /* Home + listing grid: stesso ritaglio (evita drift visivo tra pagine) */
  --listing-image-object-position: center;
  /*
   * Catalogo listing/home — card compatte ~181×232px (thumb quadrata + sottotitoli):
   * colonna fluida ~181px al viewport medio; tetto basso per non allargare troppo su desktop larghi.
   */
  --listing-grid-cell-min: clamp(148px, 17vw, 194px);
  --listing-grid-gap: clamp(0.35rem, 0.9vw, 0.62rem);
  --listing-card-image-aspect: 1 / 1;
  /* Guest marketing grid — un solo raggio/ombra (listing-card.css + guest-marketing-cards) */
  --guest-marketing-card-radius: var(--radius-lg);
  --guest-marketing-card-shadow: var(--shadow-sm);
  --guest-marketing-card-shadow-hover: var(--shadow-md);
  /* Hero search card (components/hero-search.css) */
  --hero-search-card-shadow: var(--shadow-md);
  --hero-search-card-shadow-dark-scheme: var(--shadow-lg);
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 48px;
  --icon-size-3xl: 64px;

  --avatar-size-xs: 24px;
  --avatar-size-sm: 32px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 48px;
  --avatar-size-xl: 64px;
  --avatar-size-2xl: 96px;
  --avatar-size-3xl: 128px;
  --width-xs: 160px;
  --width-sm: 180px;
  --width-md: 280px;
  --width-lg: 320px;
  --width-xl: 480px;
  --width-2xl: 640px;
  --width-full: 100%;
  --height-xs: 36px;
  --height-sm: 40px;
  --height-md: 44px;
  --height-lg: 52px;
  --height-xl: 64px;
  --height-2xl: 96px;
  --backdrop-blur-none: blur(0);
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-md: blur(8px);
  --backdrop-blur-lg: blur(10px);
  --backdrop-blur-xl: blur(20px);
  --backdrop-blur-2xl: blur(25px);
  --backdrop-saturate: saturate(180%);
  --backdrop-saturate-high: saturate(200%);
  --filter-none: none;
  --filter-blur-sm: blur(4px);
  --filter-blur-md: blur(8px);
  --filter-blur-lg: blur(16px);
  --filter-brightness-50: brightness(0.5);
  --filter-brightness-75: brightness(0.75);
  --filter-brightness-125: brightness(1.25);
  --filter-contrast-125: contrast(1.25);
  --filter-grayscale: grayscale(100%);
  --filter-sepia: sepia(100%);
  --cursor-auto: auto;
  --cursor-default: default;
  --cursor-pointer: pointer;
  --cursor-not-allowed: not-allowed;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-zoom-in: zoom-in;
  --cursor-zoom-out: zoom-out;
  --cursor-move: move;
  --cursor-text: text;
  --cursor-wait: wait;
  --cursor-help: help;
  --divider-thickness: 1px;
  --divider-thickness-md: 2px;
  --divider-thickness-lg: 4px;
  --divider-color: var(--border-color);
  --divider-color-light: rgba(0, 0, 0, 0.06);
 --divider-color-strong: var(--overlay-light);
 --divider-color-dark: var(--divider-color-strong);
  --divider-style-solid: solid;
  --divider-style-dashed: dashed;
  --divider-style-dotted: dotted;
  --spinner-size-sm: 16px;
  --spinner-size-md: 24px;
  --spinner-size-lg: 40px;
  --spinner-size-xl: 64px;
  --spinner-border-width: 2px;
  --spinner-border-width-lg: 3px;
  --spinner-color: var(--color-primary);
  --spinner-track-color: var(--color-neutral-200);
  --toast-width: 320px;
  --toast-max-width: 420px;
  --toast-padding: var(--spacing-4);
  --toast-gap: var(--spacing-3);
  --toast-offset-x: var(--spacing-6);
  --toast-offset-y: var(--spacing-6);
  --toast-border-radius: var(--radius-lg);
  --toast-shadow: var(--shadow-xl);
  --toast-enter-duration: var(--transition-slow);
  --validation-icon-size: 20px;
  --validation-icon-offset: 12px;
  --validation-icon-color-success: var(--color-success);
  --validation-icon-color-error: var(--color-error);
  --validation-icon-color-warning: var(--color-warning);
  --empty-state-icon-size: 64px;
  --empty-state-icon-size-lg: 96px;
  --empty-state-icon-size-xl: 128px;
  --empty-state-max-width: 400px;
  --empty-state-padding: var(--spacing-12);
  --empty-state-min-height: 200px;
  --empty-state-table-min-height: 200px;
  --scrollbar-width: 8px;
  --scrollbar-width-thin: 4px;
  --scrollbar-thumb-color: var(--color-neutral-400);
  --scrollbar-thumb-hover: var(--color-neutral-500);
  --scrollbar-track-color: var(--color-neutral-100);
  --gap-xs: var(--spacing-1);
  --gap-sm: var(--spacing-2);
  --gap-md: var(--spacing-4);
  --gap-lg: var(--spacing-6);
  --gap-xl: var(--spacing-8);
  --gap-2xl: var(--spacing-12);
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-10: rgba(255, 255, 255, 0.06);
  --color-white-alpha-15: rgba(255, 255, 255, 0.12);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
   --color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --color-white-alpha-75: rgba(255, 255, 255, 0.75);
  --color-white-alpha-80: rgba(255, 255, 255, 0.8);
  --color-white-alpha-90: rgba(255, 255, 255, 0.9);
  --color-white-alpha-95: rgba(255, 255, 255, 0.95);
  --shadow-text: 0 2px 6px rgba(0, 0, 0, 0.35);
  --surface-overlay-05: rgba(0, 0, 0, 0.05);
  --overlay-dark-05: var(--surface-overlay-05);
  --overlay-light: rgba(255, 255, 255, 0.88);
  --overlay-medium: var(--surface-overlay-50);
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --surface-overlay-10: rgba(0, 0, 0, 0.1);
  --surface-overlay-20: rgba(0, 0, 0, 0.2);
  --surface-overlay-30: rgba(0, 0, 0, 0.3);
  --surface-overlay-40: rgba(0, 0, 0, 0.4);
  --surface-overlay-50: rgba(0, 0, 0, 0.5);
 --surface-overlay-60: rgba(0, 0, 0, 0.6);
 --surface-overlay-75: rgba(0, 0, 0, 0.75);
 --surface-overlay-90: rgba(0, 0, 0, 0.9);
 --overlay-dark-10: var(--surface-overlay-10);
 --overlay-dark-20: var(--surface-overlay-20);
 --overlay-dark-30: var(--surface-overlay-30);
 --overlay-dark-40: var(--surface-overlay-40);
 --overlay-dark-50: var(--surface-overlay-50);
 --overlay-dark-60: var(--surface-overlay-60);
 --overlay-dark-75: var(--surface-overlay-75);
 --overlay-dark-90: var(--surface-overlay-90);
  --text-shadow-sm: 0 1px 2px var(--surface-overlay-50);
  --text-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.6);
  --text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.4);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  --ring-width-0: 0;
  --ring-width-1: 1px;
  --ring-width-2: 2px;
  --ring-width-4: 4px;
  --ring-offset-0: 0;
  --ring-offset-1: 1px;
  --ring-offset-2: 2px;
  --ring-offset-4: 4px;
  --ring-color: var(--color-primary);
  --ring-color-success: var(--color-success);
  --ring-color-error: var(--color-error);
  --ring-color-warning: var(--color-warning);
  --object-fit-contain: contain;
  --object-fit-cover: cover;
  --object-fit-fill: fill;
  --object-fit-none: none;
  --object-position-center: center;
  --object-position-top: top;
  --object-position-bottom: bottom;
  --object-position-left: left;
  --object-position-right: right;
  --delay-0: 0ms;
  --delay-75: 75ms;
  --delay-100: 100ms;
  --delay-150: 150ms;
  --delay-200: 200ms;
  --delay-300: 300ms;
  --delay-500: 500ms;
  --delay-700: 700ms;
  --delay-1000: 1000ms;
  --scale-0: 0;
  --scale-50: 0.5;
  --scale-75: 0.75;
  --scale-90: 0.9;
  --scale-95: 0.95;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
  --scale-125: 1.25;
  --scale-150: 1.5;
  --rotate-0: 0deg;
  --rotate-45: 45deg;
  --rotate-90: 90deg;
  --rotate-180: 180deg;
  --rotate-270: 270deg;
  --rotate-neg-45: -45deg;
  --rotate-neg-90: -90deg;
  --rotate-neg-180: -180deg;
  --will-change-auto: auto;
  --will-change-transform: transform;
  --will-change-opacity: opacity;
  --will-change-scroll: scroll-position;
  --safe-area-top: env(safe-area-inset-top, 0);
  --safe-area-right: env(safe-area-inset-right, 0);
  --safe-area-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-left: env(safe-area-inset-left, 0);
  --sr-only-position: absolute;
  --sr-only-width: 1px;
  --sr-only-height: 1px;
  --sr-only-clip: rect(0, 0, 0, 0);
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-success: var(--color-success);
  --bs-info: var(--color-info);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-light: var(--color-neutral-100);
  --bs-dark: var(--color-neutral-900);
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-font-weight: var(--font-weight-normal);
  --bs-body-line-height: var(--line-height-normal);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-primary);
  --bs-border-width: 1px;
  --bs-border-color: var(--border-color);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-2xl: var(--radius-2xl);
  --bs-link-color: var(--color-primary-text);
  --bs-link-hover-color: var(--color-primary-700);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-active: var(--color-primary-800);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --bs-btn-padding-y: var(--btn-padding-y);
  --bs-btn-padding-x: var(--btn-padding-x);
  --bs-btn-border-radius: var(--btn-border-radius);
  --bs-input-padding-y: var(--input-padding-y);
  --bs-input-padding-x: var(--input-padding-x);
  --bs-input-border-radius: var(--input-border-radius);
  --bs-input-border-color: var(--input-border-color);
  --bs-input-focus-border-color: var(--input-border-focus);
  --bs-card-border-radius: var(--card-border-radius);
  --bs-card-border-color: var(--card-border-color);
  --bs-card-bg: var(--card-bg);
  --bs-modal-border-radius: var(--modal-border-radius);
  --bs-modal-backdrop-bg: var(--modal-backdrop-bg);
  --navbar-bg: var(--bg-primary);
  --navbar-text: var(--text-primary);
  --navbar-link: var(--color-neutral-700);
  --navbar-link-hover: var(--color-primary-600);
  --navbar-link-active: var(--color-primary-700);
  --navbar-dropdown-bg: var(--bg-primary);
  --navbar-dropdown-text: var(--color-neutral-700);
  --navbar-dropdown-hover-bg: var(--color-neutral-100);
  --navbar-dropdown-hover-text: var(--color-primary-600);
  --navbar-border: var(--border-color);
  --navbar-shadow: var(--shadow-sm);
  /* Navbar light theme (default - follows site light theme) */
  --navbar-light-bg: var(--bg-primary);
  --navbar-light-border: var(--border-color);
  --navbar-light-link: var(--text-primary);
  --navbar-light-link-hover: var(--color-primary-600);
  --navbar-light-link-active: var(--color-primary-700);
  --navbar-light-dropdown-bg: var(--bg-secondary);
  --navbar-light-dropdown-text: var(--text-primary);
  --navbar-light-dropdown-hover-bg: var(--bg-tertiary);
  --navbar-light-dropdown-hover-text: var(--color-primary-700);
  
  /* Legacy navbar aliases retained for backward compatibility */
  --navbar-dark-bg: var(--color-neutral-900);
  --navbar-dark-text: var(--color-neutral-0);
  --navbar-dark-link: var(--color-neutral-300);
  --navbar-dark-link-hover: var(--color-primary-400);
  --navbar-dark-link-active: var(--color-primary-300);
  --navbar-dark-dropdown-bg: var(--color-neutral-800);
  --navbar-dark-dropdown-text: var(--color-neutral-300);
  --navbar-dark-dropdown-hover-bg: var(--color-neutral-700);
  --navbar-dark-dropdown-hover-text: var(--color-primary-300);
  --owner-primary: var(--color-primary-600);
  --owner-secondary: var(--color-secondary-600);
  --owner-accent: var(--color-warning-500);
  --owner-stat-bg: var(--color-primary-50);
  --owner-stat-border: var(--color-primary-200);
  --owner-stat-icon-bg: var(--color-primary-100);
  --owner-stat-icon-color: var(--color-primary-600);
  --owner-stat-text: var(--text-primary);
  --owner-stat-value: var(--color-primary-700);
  --owner-earnings-bg: var(--color-success-50);
  --owner-earnings-border: var(--color-success-200);
  --owner-earnings-icon: var(--color-success-600);
  --owner-earnings-value: var(--color-success-700);
  --owner-bookings-bg: var(--color-info-50);
  --owner-bookings-border: var(--color-info-200);
  --owner-bookings-icon: var(--color-info-600);
  --owner-bookings-value: var(--color-info-700);
  --owner-pending-bg: var(--color-warning-50);
  --owner-pending-border: var(--color-warning-200);
  --owner-pending-icon: var(--color-warning-600);
  --owner-pending-value: var(--color-warning-700);
  --owner-listings-bg: var(--color-accent-50);
  --owner-listings-border: var(--color-accent-200);
  --owner-listings-icon: var(--color-accent-600);
  --owner-listings-value: var(--color-accent-700);
  --owner-card-bg: var(--bg-card);
  --owner-card-border: var(--border-color);
  --owner-card-shadow: var(--elevation-card);
  --owner-card-shadow-hover: var(--elevation-card-hover);
  --owner-card-padding: var(--spacing-3);
  --owner-card-radius: var(--radius-lg);
  --owner-card-gap: var(--spacing-2);
  --owner-card-image-height: 180px;
  --owner-label-size: var(--font-size-xs);
  --owner-label-weight: var(--font-weight-semibold);
  --owner-label-color: var(--text-secondary);
  --owner-badge-size: var(--font-size-xs);
  --owner-badge-padding: var(--spacing-1) var(--spacing-2);
  --booking-widget-bg: var(--bg-card);
  --booking-widget-border: var(--color-neutral-300);
  --booking-widget-shadow: var(--shadow-lg);
  --booking-widget-radius: var(--radius-lg);
  --booking-widget-padding: var(--spacing-6);
  
  --booking-price-color: var(--color-primary-700);
  --booking-price-size: var(--font-size-3xl);
  --booking-price-weight: var(--font-weight-bold);
  
  --booking-btn-bg: var(--color-primary-600);
  --booking-btn-hover: var(--color-primary-700);
  --booking-btn-active: var(--color-primary-800);
  --booking-btn-text: var(--color-neutral-0);
  --booking-btn-radius: var(--radius-md);
  --booking-btn-shadow: var(--shadow-sm);
  /* Layout: single source for dashboard padding-top, sidebar top, navbar height */
  --layout-navbar-height: var(--navbar-height, 56px);
  --layout-sidebar-width: var(--sidebar-width, 280px);
  --layout-z-navbar: var(--z-navbar, 1030);
  --layout-z-sidebar: var(--z-offcanvas);
  --layout-z-sidebar-backdrop: var(--z-offcanvas-backdrop);
  --transition-normal: 0.2s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* P0: @media / @supports must be top-level (no nesting inside :root) for predictable parsing. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-bounce: 0ms;
    --transition-none: 0ms;
    --transition-slower: 0ms;
  }
}

/* ACCESSIBILITY - High Contrast */
@media (prefers-contrast: high) {
  :root {
    --border-color: var(--color-neutral-900);
    --shadow-sm: none;
    --shadow-md: 0 0 0 2px var(--color-neutral-900);
    --shadow-lg: 0 0 0 3px var(--color-neutral-900);
    --elevation-card: none;
    --elevation-card-hover: 0 0 0 2px var(--color-neutral-900);
  }
}

/* ========================================
   NAVBAR COLORS - v15.0.0
   ======================================== */

/* ========================================
   OWNER DASHBOARD COLORS - v15.0.0
   ======================================== */

/* ========================================
   Z-INDEX (deprecated block removed)
   Use tokens from "Z-INDEX SSOT" section earlier in this file.
   ======================================== */

/* ========================================
   BOOKING WIDGET - v15.0.0
   ======================================== */
/* ============================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================ */

/* Navbar height per breakpoint (Conversion Phase 6) */
@media (max-width: 767.98px) {
  :root {
    --navbar-height: var(--navbar-height-mobile, 56px);
    --page-section-margin-bottom: var(--section-gap-mobile, 32px);
  }
}

@media (min-width: 767.98px) and (max-width: 991.98px) {
  :root {
    --navbar-height: var(--navbar-height-tablet, 64px);
  }
}

@media (min-width: 991.98px) {
  :root {
    --navbar-height: var(--navbar-height-desktop, 80px);
  }
}

/* PERFORMANCE — mobile transitions (ex performance-optimizations.css) */
@media screen and (max-width: 767.98px) {
  :root {
    --transition-fast: 0.1s;
    --transition-normal: 0.15s;
    --transition-slow: 0.2s;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --enable-backdrop-filter: 1;
    --enable-box-shadow: 1;
  }
}

/* Auto-generated migration tokens (hex elimination pass) */
:root {
  --color-migration-auto-000000: rgb(0 0 0);
  --color-migration-auto-0000000a: rgb(0 0 0 / 0.039);
  --color-migration-auto-0000000f: rgb(0 0 0 / 0.059);
  --color-migration-auto-00000014: rgb(0 0 0 / 0.078);
  --color-migration-auto-0000001a: rgb(0 0 0 / 0.102);
  --color-migration-auto-00000026: rgb(0 0 0 / 0.149);
  --color-migration-auto-00000080: rgb(0 0 0 / 0.502);
  --color-migration-auto-000000bf: rgb(0 0 0 / 0.749);
  --color-migration-auto-0003: rgb(0 0 0 / 0.2);
  --color-migration-auto-0077b5: rgb(0 119 181);
  --color-migration-auto-0369a1: rgb(3 105 161);
  --color-migration-auto-047857: rgb(4 120 87);
  --color-migration-auto-0b1424: rgb(11 20 36);
  --color-migration-auto-0b8ab5: rgb(11 138 181);
  --color-migration-auto-0c5460: rgb(12 84 96);
  --color-migration-auto-0d1117: rgb(13 17 23);
  --color-migration-auto-0d47a1: rgb(13 71 161);
  --color-migration-auto-0f766e: rgb(15 118 110);
  --color-migration-auto-111c31: rgb(17 28 49);
  --color-migration-auto-155724: rgb(21 87 36);
  --color-migration-auto-166d8d: rgb(22 109 141);
  --color-migration-auto-1787a8ed: rgb(23 135 168 / 0.929);
  --color-migration-auto-17a2b8: rgb(23 162 184);
  --color-migration-auto-181c3a: rgb(24 28 58);
  --color-migration-auto-1877f2: rgb(24 119 242);
  --color-migration-auto-1d4ed8: rgb(29 78 216);
  --color-migration-auto-1da1f2: rgb(29 161 242);
  --color-migration-auto-22c55e: rgb(34 197 94);
  --color-migration-auto-25d366: rgb(37 211 102);
  --color-migration-auto-27ae60: rgb(39 174 96);
  --color-migration-auto-33415538: rgb(51 65 85 / 0.22);
  --color-migration-auto-343a40: rgb(52 58 64);
  --color-migration-auto-34495e: rgb(52 73 94);
  --color-migration-auto-3f6212: rgb(63 98 18);
  --color-migration-auto-4070f4: rgb(64 112 244);
  --color-migration-auto-4a7516: rgb(74 117 22);
  --color-migration-auto-4db8d8: rgb(77 184 216);
  --color-migration-auto-555: rgb(85 85 85);
  --color-migration-auto-5a52d5: rgb(90 82 213);
  --color-migration-auto-5a9120: rgb(90 145 32);
  --color-migration-auto-5eb0ef: rgb(94 176 239);
  --color-migration-auto-6ee7b7: rgb(110 231 183);
  --color-migration-auto-707070: rgb(112 112 112);
  --color-migration-auto-7cc9e566: rgb(124 201 229 / 0.4);
  --color-migration-auto-856404: rgb(133 100 4);
  --color-migration-auto-93c5fd: rgb(147 197 253);
  --color-migration-auto-a7f3d0: rgb(167 243 208);
  --color-migration-auto-adb5bd: rgb(173 181 189);
  --color-migration-auto-b45309: rgb(180 83 9);
  --color-migration-auto-b76e00: rgb(183 110 0);
  --color-migration-auto-bbb: rgb(187 187 187);
  --color-migration-auto-bc1888: rgb(188 24 136);
  --color-migration-auto-c3cfe2: rgb(195 207 226);
  --color-migration-auto-cc2366: rgb(204 35 102);
  --color-migration-auto-d0d0d0: rgb(208 208 208);
  --color-migration-auto-d4edda: rgb(212 237 218);
  --color-migration-auto-d97706: rgb(217 119 6);
  --color-migration-auto-dbdbdb: rgb(219 219 219);
  --color-migration-auto-dbe4f3: rgb(219 228 243);
  --color-migration-auto-dbeafe: rgb(219 234 254);
  --color-migration-auto-dc2626: rgb(220 38 38);
  --color-migration-auto-dc2743: rgb(220 39 67);
  --color-migration-auto-dce6f0: rgb(220 230 240);
  --color-migration-auto-dcfce7: rgb(220 252 231);
  --color-migration-auto-e11d48: rgb(225 29 72);
  --color-migration-auto-e5e3df: rgb(229 227 223);
  --color-migration-auto-e6683c: rgb(230 104 60);
  --color-migration-auto-e74c3c: rgb(231 76 60);
  --color-migration-auto-e83e8c: rgb(232 62 140);
  --color-migration-auto-e8eef5: rgb(232 238 245);
  --color-migration-auto-e91e63: rgb(233 30 99);
  --color-migration-auto-ebeff2: rgb(235 239 242);
  --color-migration-auto-ecf0f1: rgb(236 240 241);
  --color-migration-auto-ecfdf5: rgb(236 253 245);
  --color-migration-auto-ededed: rgb(237 237 237);
  --color-migration-auto-eef2f7: rgb(238 242 247);
  --color-migration-auto-f093fb: rgb(240 147 251);
  --color-migration-auto-f09433: rgb(240 148 51);
  --color-migration-auto-f0f7ff: rgb(240 247 255);
  --color-migration-auto-f0f9fd: rgb(240 249 253);
  --color-migration-auto-f0f9ff: rgb(240 249 255);
  --color-migration-auto-f39c12: rgb(243 156 18);
  --color-migration-auto-f4f4f4: rgb(244 244 244);
  --color-migration-auto-f4f6f9: rgb(244 246 249);
  --color-migration-auto-f5576c: rgb(245 87 108);
  --color-migration-auto-f59e0b: rgb(245 158 11);
  --color-migration-auto-f5f7fa: rgb(245 247 250);
  --color-migration-auto-f5fafe: rgb(245 250 254);
  --color-migration-auto-f6fbff: rgb(246 251 255);
  --color-migration-auto-f8f8f8: rgb(248 248 248);
  --color-migration-auto-f8fbff: rgb(248 251 255);
  --color-migration-auto-f9f9f9: rgb(249 249 249);
  --color-migration-auto-fca5a5: rgb(252 165 165);
  --color-migration-auto-fecaca: rgb(254 202 202);
  --color-migration-auto-fef2f2: rgb(254 242 242);
  --color-migration-auto-ff0000: rgb(255 0 0);
  --color-migration-auto-ff6a3d: rgb(255 106 61);
  --color-migration-auto-ffe8e0: rgb(255 232 224);
}