/*
 * Semantic design contract for every public-facing component.
 * Components should use these names instead of hard-coded colors and sizes.
 */
:root {
    color-scheme: light;

    /* Typography */
    --font-display: Georgia, "Times New Roman", serif;
    --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-data: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Layout and rhythm */
    --content-width: 1180px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Shape */
    --radius-control: 8px;
    --radius-card: 16px;
    --radius-panel: 24px;
    --radius-pill: 999px;
    --control-height: 46px;

    /* Motion */
    --motion-fast: 150ms;
    --motion-normal: 240ms;
    --ease-standard: cubic-bezier(.2, .8, .2, 1);

    /* Semantic colors receive their final values from themes.css */
    --color-page: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f4f7fa;
    --color-surface-glass: rgba(255,255,255,.94);
    --color-text: #10243e;
    --color-text-muted: #526170;
    --color-border: #dce3ea;
    --color-brand: #0b1f3a;
    --color-action: #1479d1;
    --color-action-hover: #0c63b2;
    --color-focus: #2563eb;
    --color-premium: #f2c94c;
    --color-available: #16803a;
    --color-warning: #ea580c;
    --color-danger: #dc2626;
    --color-info: #2563eb;

    --shadow-card: 0 10px 30px rgba(11,31,58,.10);
    --shadow-floating: 0 18px 50px rgba(11,31,58,.18);
    --hero-overlay: linear-gradient(90deg, rgba(4,21,40,.76), rgba(4,21,40,.18));
}

/* Compatibility aliases for the current stylesheet. */
:root {
    --accent: var(--color-action);
    --ink: var(--color-text);
    --ink-soft: var(--color-text-muted);
    --line: var(--color-border);
    --bg: var(--color-page);
    --bg-soft: var(--color-surface-soft);
    --radius: var(--radius-card);
    --shadow: var(--shadow-card);
    --font: var(--font-body);
    --basic-green: var(--color-available);
    --basic-red: var(--color-danger);
}

html { font-family: var(--font-body); background: var(--color-page); }
body { color: var(--color-text); background: var(--color-page); }
/* font-variant-numeric: lining-nums forces uniform-height digits -- the
   display fonts (Cormorant Garamond, DM Serif Display, Playfair Display)
   default to old-style figures, where "1" in particular renders as a thin,
   ambiguous stroke that reads more like a lowercase "l" than a numeral at
   large display sizes (e.g. "The 1 Hotel South Beach..." in the homepage
   hero h1). */
h1, h2, .display-title { font-family: var(--font-display); font-variant-numeric: lining-nums; }
table, .price, .spec, .calc-result { font-family: var(--font-data); }

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-focus) 60%, white);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}