/* Recommended: refined luxury brokerage / hospitality presentation. */
html[data-theme="coastal"] {
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", Inter, ui-sans-serif, sans-serif;
    --font-data: "Manrope", Inter, ui-sans-serif, sans-serif;
    --color-page: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-soft: #f2f5f8;
    --color-surface-glass: rgba(255,255,255,.94);
    --color-text: #0b1f3a;
    --color-text-muted: #526170;
    --color-border: #d9e1e8;
    --color-brand: #081d35;
    --color-action: #1479d1;
    --color-action-hover: #0b62ad;
    --color-focus: #2563eb;
    --color-premium: #f2c94c;
    --color-available: #16803a;
    --color-warning: #ea580c;
    --color-danger: #dc2626;
    --color-info: #2563eb;
    --radius-control: 8px;
    --radius-card: 14px;
    --radius-panel: 22px;
    --shadow-card: 0 10px 30px rgba(11,31,58,.09);
    --shadow-floating: 0 20px 60px rgba(7,28,51,.20);
    --hero-overlay: linear-gradient(90deg, rgba(5,24,45,.82), rgba(5,24,45,.12));
}

/* Brighter, friendlier seasonal-rental presentation. */
html[data-theme="resort"] {
    --font-display: "DM Serif Display", Georgia, serif;
    --font-body: "Nunito Sans", Inter, ui-sans-serif, sans-serif;
    --font-data: "Nunito Sans", Inter, ui-sans-serif, sans-serif;
    --color-page: #f7fcff;
    --color-surface: #ffffff;
    --color-surface-soft: #eaf7ff;
    --color-surface-glass: rgba(255,255,255,.96);
    --color-text: #102a43;
    --color-text-muted: #486581;
    --color-border: #cfe3ef;
    --color-brand: #102a43;
    --color-action: #0969da;
    --color-action-hover: #0756b4;
    --color-focus: #2563eb;
    --color-premium: #ffd43b;
    --color-available: #16803a;
    --color-warning: #f97316;
    --color-danger: #dc2626;
    --color-info: #0969da;
    --radius-control: 12px;
    --radius-card: 18px;
    --radius-panel: 26px;
    --shadow-card: 0 12px 34px rgba(9,105,218,.10);
    --shadow-floating: 0 20px 60px rgba(10,65,110,.18);
    --hero-overlay: linear-gradient(90deg, rgba(4,53,89,.68), rgba(4,53,89,.05));
}

/* Crisp, comparison-oriented interface for inventory-heavy browsing. */
html[data-theme="precision"] {
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: Inter, ui-sans-serif, sans-serif;
    --font-data: Inter, ui-sans-serif, sans-serif;
    --color-page: #eef2f6;
    --color-surface: #ffffff;
    --color-surface-soft: #e7edf3;
    --color-surface-glass: rgba(255,255,255,.97);
    --color-text: #081b33;
    --color-text-muted: #4a5c70;
    --color-border: #ccd6e0;
    --color-brand: #081b33;
    --color-action: #2563eb;
    --color-action-hover: #1d4ed8;
    --color-focus: #2563eb;
    --color-premium: #facc15;
    --color-available: #15803d;
    --color-warning: #ea580c;
    --color-danger: #dc2626;
    --color-info: #2563eb;
    --radius-control: 6px;
    --radius-card: 10px;
    --radius-panel: 14px;
    --shadow-card: 0 6px 22px rgba(8,27,51,.10);
    --shadow-floating: 0 18px 48px rgba(8,27,51,.20);
    --hero-overlay: linear-gradient(90deg, rgba(3,16,32,.86), rgba(3,16,32,.22));
}

/* Shared component treatment: appearance changes, behavior does not. */
html[data-theme] .site-header { background: color-mix(in srgb, var(--color-brand) 94%, transparent); }
html[data-theme] .btn,
html[data-theme] .nav-cta { background: var(--color-action); min-height: var(--control-height); }
html[data-theme] .btn:hover,
html[data-theme] .nav-cta:hover { background: var(--color-action-hover); }
html[data-theme] :where(input, select, textarea) {
    min-height: var(--control-height);
    border-color: var(--color-border);
    border-radius: var(--radius-control);
}
html[data-theme] :where(.card, .glass-card, .calc-box, .form-card) {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
html[data-theme] .filter-bar {
    background: var(--color-surface-glass);
    border-color: var(--color-border);
    border-radius: var(--radius-panel);
}
/* Deliberately NOT theming .listing-table row/header backgrounds here --
   style.css already has a page-aware translucency rule for them
   (.photo-bg-page gets solid-enough glass, uniform across every page that
   uses it). This rule used to force an opaque background on every row
   regardless of page, breaking it: it fought the page rule's
   backdrop-filter and bled the background photo through instead of
   hiding it. */
html[data-theme] .status-available { color: var(--color-available); }
html[data-theme] .status-warning { color: var(--color-warning); }
html[data-theme] .status-danger { color: var(--color-danger); }