/* =============================================================
   ALFANZOO, FOUNDATION
   Layer 1. Loaded BEFORE styles.css.
   Resets, design tokens, base typography, primitives, utilities.
   Existing class names from styles.css are untouched; this only
   adds the system they were missing.
   ============================================================= */

/* ---------- Modern reset (logical properties) ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
    /* --- Brand core (unchanged identity) --- */
    --ink: #14120D;
    --coal: #201C14;
    --ivory: #FAF6EE;
    --sand: #EFE6D2;
    --line: #E2D7BE;
    --brass: #C6A15B;
    /* Was #9A7739 = 3.84:1 on ivory. It carries small uppercase text
       (kickers, prices, stat figures), so AA needs 4.5:1. Darkened on the
       same hue to #7E622F = 5.30:1. Only ever used as text or a border
       here, never as a background behind light text. */
    --brass-deep: #7E622F;
    --marigold: #E39A2D;
    --clay: #C96F4A;
--ink-soft: #57503F;
    /* Was #97907D, which is 2.95:1 on ivory and 3.13:1 on a card, nowhere near
       AA for the small text it actually carries (table headers, "/ night",
       dish blurbs, album counts, sec-index labels). Every use of it in this
       codebase sits on a LIGHT surface, so it was darkened on the same hue to
       5.45:1 on ivory, 5.78:1 on a card and 4.73:1 on sand. On dark surfaces use
       --on-dark-muted instead; this colour is not legible there. */
    --muted: #6B6454;
    /* Secondary text on the ink/coal/forest surfaces. Ivory at .62 is 7.1:1 on
       ink and 6.4:1 on coal, the old .4 alpha was 3.6:1 and failed. */
    --muted-on-dark: rgba(250, 246, 238, .62);
    --forest: #2E3B32;
    --forest-deep: #1A211C;

    /* --- Derived ramps (new) --- */
    --ink-900: #0B0A07;
    --ink-800: var(--ink);
    --ink-700: var(--coal);
    --ink-600: #332C20;
    --paper-50: #FFFDF8;
    --paper-100: var(--ivory);
    --paper-200: var(--sand);
    --paper-300: #E7DCC4;
    --brass-100: #F1E4C8;
    --brass-200: #E4CE9C;
    --brass-300: var(--brass);
    --brass-400: #B08D49;
    --brass-500: #7E622F;
    --brass-600: #6A5228;

    /* --- Semantic (new) --- */
    --bg: var(--paper-100);
    --bg-raised: var(--paper-50);
    --bg-sunken: #F3ECDE;
    /* Used by four section backgrounds in styles.css (.team-section,
       .compare-section, .sign-section, .menu-section) but never defined,
       so `background: var(--white)` was invalid at computed-value time
       and fell back to transparent, they only looked right because the
       body is ivory. Defining it gives them the intended subtle lift. */
    --white: var(--paper-50);
    --fg: var(--ink);
    --fg-muted: var(--ink-soft);
    --fg-subtle: var(--muted);
    --accent: var(--brass);
    --accent-ink: var(--ink);
    --border: var(--line);
    --border-strong: #D2C4A4;
    --focus: var(--brass);
    --on-dark: #F7F2E7;
    --on-dark-muted: rgba(247,242,231,.72);

    /* --- Fluid type scale (new): 1.25 major third, clamped ------ */
    --fs-3xs: clamp(.625rem, .60rem + .12vw, .688rem);
    --fs-2xs: clamp(.688rem, .66rem + .14vw, .75rem);
    --fs-xs:  clamp(.75rem, .72rem + .16vw, .813rem);
    --fs-sm:  clamp(.875rem, .84rem + .18vw, .938rem);
    --fs-md:  clamp(1rem, .96rem + .20vw, 1.063rem);
    --fs-lg:  clamp(1.125rem, 1.06rem + .32vw, 1.25rem);
    --fs-xl:  clamp(1.313rem, 1.20rem + .56vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.33rem + .85vw, 1.938rem);
    --fs-3xl: clamp(1.75rem, 1.47rem + 1.40vw, 2.5rem);
    --fs-4xl: clamp(2rem, 1.58rem + 2.10vw, 3.25rem);
    --fs-5xl: clamp(2.25rem, 1.60rem + 3.25vw, 4.25rem);
    --fs-6xl: clamp(2.5rem, 1.55rem + 4.75vw, 5.5rem);
    --fs-display: clamp(2.75rem, 1.30rem + 7.25vw, 7.5rem);

    /* --- Line heights --- */
    --lh-tight: 1.02;
    --lh-snug: 1.16;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* --- Tracking --- */
    --tr-display: -.035em;
    --tr-heading: -.022em;
    --tr-body: 0;
    --tr-wide: .08em;
    --tr-caps: .18em;

    /* --- Spacing scale (new) --- */
    --space-3xs: .125rem;
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
    --space-2xl: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
    --space-3xl: clamp(3rem, 2rem + 5vw, 5.5rem);
    --space-4xl: clamp(4rem, 2.4rem + 8vw, 8rem);
    --section-y: clamp(4rem, 2.5rem + 7.5vw, 8.5rem);
    --gutter: clamp(1.25rem, .6rem + 3.25vw, 4rem);

    /* --- Radii (new) --- */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 40px;
    --r-pill: 999px;
    /* Backwards-compatible aliases */
    --radius: var(--r-sm);
    --radius-lg: var(--r-lg);

    /* --- Elevation: warm-tinted, never neutral black (new) --- */
    --e1: 0 1px 2px rgba(28,22,10,.06), 0 1px 1px rgba(28,22,10,.04);
    --e2: 0 2px 4px rgba(28,22,10,.05), 0 4px 8px rgba(28,22,10,.05);
    --e3: 0 4px 8px rgba(28,22,10,.05), 0 10px 20px rgba(28,22,10,.07);
    --e4: 0 8px 16px rgba(28,22,10,.06), 0 20px 40px rgba(28,22,10,.10);
    --e5: 0 16px 32px rgba(28,22,10,.08), 0 40px 80px rgba(28,22,10,.14);
    --shadow-md: var(--e4);
    --shadow-lg: var(--e5);

    /* --- Motion (new) --- */
    --dur-2xs: 90ms;
    --dur-xs: 160ms;
    --dur-sm: 240ms;
    --dur-md: 380ms;
    --dur-lg: 620ms;
    --dur-xl: 900ms;
    --ease-out: cubic-bezier(.16,1,.3,1);        /* decelerate */
    --ease-in-out: cubic-bezier(.65,0,.35,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1); /* slight overshoot */
    --ease: var(--ease-out);
    /* Legacy alias used across styles.css */
    --ease-legacy: cubic-bezier(.22,.61,.36,1);

    /* --- Layout --- */
    --max-width: 1240px;
    --max-wide: 1560px;
    --max-prose: 68ch;
    --nav-h: 76px;
    --nav-h-scrolled: 60px;

    /* --- Z-index layers (new) --- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 1000;
    --z-drawer: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
    --z-preloader: 9999;

    /* --- Materials (new) --- */
    --glass: rgba(20,18,13,.72);
    --glass-light: rgba(250,246,238,.72);
    --glass-blur: saturate(180%) blur(20px);
    --hairline: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* =============================================================
   2. BASE
   ============================================================= */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    /* Anchor targets clear the fixed nav */
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--tr-body);
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
    /* Prevent iOS zoom-on-focus without shrinking the base size */
    -webkit-tap-highlight-color: rgba(198,161,91,.18);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Fluid media defaults, prevents layout shift, honours the intrinsic ratio */
img { background-color: var(--bg-sunken); }

/* =============================================================
   3. TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-heading);
    text-wrap: balance;
    color: var(--fg);
}
h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p, li, dd, dt { text-wrap: pretty; }
p { max-width: var(--max-prose); }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

small { font-size: var(--fs-xs); }

code, kbd, samp, pre {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: .92em;
}

/* Optical kerning for the display face */
.logo, .kicker, h1, h2, .sec-index { font-kerning: normal; font-variant-ligatures: common-ligatures; }

/* Long URLs and emails must never break the layout */
a[href^="http"] { overflow-wrap: anywhere; }

/* =============================================================
   4. FOCUS, visible, consistent, never on mouse
   ============================================================= */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
/* Dark surfaces need a light ring */
.site-nav :focus-visible,
.hero :focus-visible,
.on-dark :focus-visible,
.on-dark :focus-visible { outline-color: var(--brass-200); }

.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: var(--z-toast);
    padding: .7rem 1.4rem;
    background: var(--ink);
    color: var(--ivory);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    border-radius: 0 0 var(--r-md) var(--r-md);
    transition: transform var(--dur-sm) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

#azMain:focus { outline: none; }

/* =============================================================
   5. SELECTION & SCROLLBAR
   ============================================================= */
::selection { background: var(--brass); color: var(--ink); text-shadow: none; }

* { scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }

/* =============================================================
   6. FORM PRIMITIVES
   ============================================================= */
input, textarea, select, button { font: inherit; color: inherit; }

input::placeholder, textarea::placeholder {
    color: var(--muted);
    opacity: .75;
}

/* Date/number spinners: keep, but subtle */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type="date"], input[type="time"] { min-height: 3.1rem; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Remove the inner shadow that breaks rounded corners in Safari */
input:focus, textarea:focus, select:focus { -webkit-appearance: none; }

/* Buttons inside forms must not submit by accident */
button:not([type]), button[type="submit"] { cursor: pointer; }

fieldset { border: 0; min-width: 0; }
legend { padding: 0; }

/* =============================================================
   7. MEDIA BEHAVIOUR
   ============================================================= */
img, video { height: auto; }

/* Respect reduced motion globally, not just where it was opt-in */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   8. UTILITIES (additive, safe to use anywhere)
   ============================================================= */
.visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.u-measure        { max-width: var(--max-prose); }
.u-measure-tight  { max-width: 56ch; }
.u-center         { margin-inline: auto; }
.u-text-center    { text-align: center; }
.u-balance        { text-wrap: balance; }
.u-pretty         { text-wrap: pretty; }
.u-nowrap         { white-space: nowrap; }
.u-truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.u-stack   { display: flex; flex-direction: column; gap: var(--space-md); }
.u-row     { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.u-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }

.u-hide        { display: none !important; }
@media (max-width: 640px)  { .u-hide-mobile  { display: none !important; } }
@media (min-width: 641px)  { .u-only-mobile  { display: none !important; } }
@media (max-width: 900px)  { .u-hide-tablet  { display: none !important; } }

.u-full        { inline-size: 100%; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mb-lg { margin-bottom: var(--space-lg); }
.u-mb-xl { margin-bottom: var(--space-xl); }

.u-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.u-lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
    font-weight: 300;
}

/* Hairline rule that works on any background */
.u-rule { block-size: 1px; background: var(--border); border: 0; }
.on-dark .u-rule { background: rgba(255,255,255,.12); }

/* =============================================================
   9. PRINT, a resort should print its details nicely
   ============================================================= */
@media print {
    :root { --ink: #000; --ivory: #fff; --sand: #fff; }
    body { background: #fff !important; color: #000 !important; font-size: 11pt; }
    .site-nav, .mob-nav, .hero-widget, .footer,
    .az-marquee, .marquee, .scroll-cue, .live-editor-toolbar, .chat-launcher,
    /* .dg-lb is the photo lightbox. It was never in this list even though it is a
       full-bleed fixed overlay, because it is invisible when closed (opacity 0,
       visibility hidden) and so rarely showed up in a print. But a visitor who
       printed a page with a photo open (a normal thing to do from the viewer, since
       that is where the caption and the credit are), got a page of black. The dead
       .lightbox and .mgal-box classes are still listed because removing them is not
       this job. */
    #az-preloader, .lightbox, .mgal-box, .dg-lb, .az-to-top, .skip-link,
    button:not(.print-keep), .btn { display: none !important; }
    h1, h2, h3 { break-after: avoid-page; color: #000 !important; }
    img { max-height: 4in; object-fit: contain; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
    section, blockquote, .avail-card { break-inside: avoid; }
    .hero { min-height: auto !important; color: #000 !important; }
    .hero-bg-zoom, .hero-grain { display: none !important; }
}

/* =============================================================
   10. COLOR-MIX ENHANCEMENTS (progressive)
   ============================================================= */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --accent-wash: color-mix(in oklab, var(--brass) 14%, transparent);
        --accent-line: color-mix(in oklab, var(--brass) 40%, transparent);
        --surface-tint: color-mix(in oklab, var(--brass) 5%, var(--paper-100));
        --surface-tint-deep: color-mix(in oklab, var(--brass) 11%, var(--paper-100));
    }
}
:root {
    --accent-wash: rgba(198,161,91,.14);
    --accent-line: rgba(198,161,91,.40);
    --surface-tint: #F6F0E2;
    --surface-tint-deep: #F1E8D4;
}