/* ==========================================================================
   Design tokens — the single source for colour, type, spacing and elevation.

   The palette is the Costa Blanca in late afternoon: sun-bleached sand, the
   terracotta of the roof tiles, the olive of the trees along the road. It is a
   deliberate commitment to one warm, light look rather than a light/dark pair —
   the site is a holiday brochure, and holiday brochures are not dark grey.

   Nothing outside this file states a raw colour or pixel size.
   ========================================================================== */

:root {
    /* --- Brand ----------------------------------------------------------- */

    /* Roof tiles and terracotta pots. Primary action colour. */
    --color-terracotta: #b4552d;
    --color-terracotta-dark: #8f4123;
    --color-terracotta-light: #d47a4f;
    --color-terracotta-tint: #f6e6de;

    /* Olive trees. Secondary accent, used for "available" and success states. */
    --color-olive: #6b7a55;
    --color-olive-dark: #55633f;
    --color-olive-tint: #e9ede1;

    /* Mediterranean water. Used sparingly — links inside prose, info notices. */
    --color-sea: #2f6f7e;
    --color-sea-tint: #e2eef1;

    /* --- Neutrals -------------------------------------------------------- */

    /* Warm off-whites. --surface is the page, --surface-raised sits on top of it. */
    --color-sand: #faf6f0;
    --color-sand-deep: #f2ebe0;
    --color-surface: var(--color-sand);
    --color-surface-raised: #ffffff;

    /* Warm near-black; never pure #000, which reads cold against sand. */
    --color-ink: #2b2622;
    --color-ink-soft: #4a423a;
    --color-ink-muted: #6e655c;
    --color-ink-faint: #9a9086;

    --color-border: #e5dccf;
    --color-border-strong: #d0c3b1;

    /* --- Status ---------------------------------------------------------- */
    --color-danger: #a8342a;
    --color-danger-tint: #f8e6e4;
    --color-warning: #9a6b12;
    --color-warning-tint: #fbf0da;

    /* --- Typography ------------------------------------------------------ */

    /* Cormorant Garamond for display, Inter for everything read at length.
       Fallbacks are chosen to shift the layout as little as possible. */
    --font-display: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type scale. clamp() means no breakpoint-by-breakpoint font sizing:
       the middle term is the viewport-relative growth, the outer two the bounds. */
    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.3rem);
    --text-xl: clamp(1.35rem, 1vw + 1.1rem, 1.7rem);
    --text-2xl: clamp(1.7rem, 1.8vw + 1.2rem, 2.4rem);
    --text-3xl: clamp(2.1rem, 3vw + 1.3rem, 3.4rem);
    --text-4xl: clamp(2.6rem, 5vw + 1.2rem, 4.75rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.015em;
    --tracking-wide: 0.02em;
    /* Small-caps-ish labels above headings. */
    --tracking-widest: 0.14em;

    /* --- Spacing --------------------------------------------------------- */

    /* A 4px-based scale; --space-6 (24px) is the default rhythm unit. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Vertical padding of a page section, shrinking on small screens. */
    --section-gap: clamp(3.5rem, 7vw, 7rem);

    /* --- Layout ---------------------------------------------------------- */
    --container-width: 72rem;
    --container-narrow: 46rem;
    --container-wide: 86rem;
    --container-padding: clamp(1.25rem, 4vw, 2.5rem);

    --header-height: 4.5rem;

    /* --- Shape and depth ------------------------------------------------- */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-full: 999px;

    /* Warm-tinted shadows; a neutral grey shadow looks dirty on sand. */
    --shadow-sm: 0 1px 2px rgb(43 38 34 / 0.06), 0 1px 3px rgb(43 38 34 / 0.04);
    --shadow: 0 2px 4px rgb(43 38 34 / 0.05), 0 6px 16px rgb(43 38 34 / 0.07);
    --shadow-lg: 0 4px 8px rgb(43 38 34 / 0.05), 0 18px 40px rgb(43 38 34 / 0.11);
    --shadow-focus: 0 0 0 3px rgb(180 85 45 / 0.28);

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 120ms;
    --duration: 220ms;
    --duration-slow: 420ms;

    --z-header: 100;
    --z-drawer: 200;
    --z-lightbox: 300;
}

/* Honour the OS "reduce motion" setting globally rather than per animation. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration: 0ms;
        --duration-slow: 0ms;
    }
}