/* =============================================
   Casa de Tisno — Design Tokens
   Single source of truth for brand values
   ============================================= */

:root {
    /* Brand colors from corporate identity */
    --coral: #FC7753;
    --coral-dark: #e8603c;
    --coral-light: #fda08a;
    --blue: #66D7D1;
    --blue-dark: #4dc4be;
    --blue-light: #a3e8e4;
    --alabaster: #F2EFEA;
    --alabaster-dark: #e5e0d8;
    --purple: #403D58;
    --purple-light: #5a5775;
    --yellow: #DBD56E;
    --yellow-light: #e8e49c;

    /* Extended palette */
    --white: #FFF;
    --black: #1a1a2e;
    --text-primary: #2d2b3d;
    --text-secondary: #6b687d;
    --text-light: #9895a8;
    --border: #e0ddd6;
    --border-light: #ece9e3;

    /* Booking.com brand navy — used for the rating chip in the footer. */
    --booking-navy: #003580;
    --booking-navy-dark: #002a66;

    /* Typography — all sans-serif */
    --font-display: 'DM Sans', 'Helvetica Neue', -apple-system, sans-serif;
    --font-body: 'DM Sans', 'Helvetica Neue', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font sizes - fluid scale (bumped for readability) */
    --text-xs: clamp(0.88rem, 0.82rem + 0.3vw, 1rem);
    --text-sm: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
    --text-base: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
    --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-xl: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem);
    --text-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.4rem);
    --text-3xl: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
    --text-4xl: clamp(2.6rem, 1.95rem + 3.2vw, 4.2rem);
    --text-5xl: clamp(3.1rem, 2.3rem + 4vw, 5.4rem);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Layout */
    --container-width: 1200px;
    --container-narrow: 900px;
    --container-wide: 1400px;

    /* Top navigation height — drives `scroll-padding-top`, the hero
       content offset and where the hero video starts so the bar never
       overlaps the video / scrolled-to anchors. Matches the resting
       (non-scrolled) bar: padding-y (--space-lg = 24px) × 2 + logo 40px. */
    --nav-height: 88px;

    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgb(64 61 88 / 0.08);
    --shadow-md: 0 4px 12px rgb(64 61 88 / 0.1);
    --shadow-lg: 0 8px 30px rgb(64 61 88 / 0.12);
    --shadow-xl: 0 16px 50px rgb(64 61 88 / 0.15);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
}