/* ==========================================================================
   David Jolaegbe & Associates — Design Tokens
   Single source of truth for color, type, space, shape, and motion.
   Palette: navy blue · grey · white (inspired by a premium resort brand).
   ========================================================================== */

:root {
    /* ---------- Color ---------- */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F7F7F7;
    --color-bg-tan: #EFEAD8;

    --color-header: #6B6B6B;

    --color-text: #333333;
    --color-text-secondary: #585858;
    --color-text-muted: #A49E99;
    --color-text-inverse: #FFFFFF;

    --color-border: #E5E5E5;
    --color-border-strong: #B3ACA6;
    --color-border-tan: #E8E4D0;

    --color-accent: #1F4E79;
    --color-accent-dark: #173C60;
    --color-accent-deeper: #0E2540;
    --color-accent-red: #2C6FBD;
    --color-accent-button: #1B4B86;
    --color-accent-tint: #EAF1F8;
    --color-accent-tint-2: #D7E4F0;

    --color-on-accent: #FFFFFF;

    --color-gold: #B28A4E;
    --color-success: #2E7D32;
    --color-error: #C0392B;

    /* ---------- Typography ---------- */
    --font-heading: 'Fjalla One', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

    --fs-hero: 60px;
    --fs-section: 42px;
    --fs-property: 30px;
    --fs-sub: 26px;
    --fs-body: 17px;
    --fs-nav: 15px;
    --fs-button: 16px;
    --fs-small: 14px;
    --fs-eyebrow: 13px;
    --fs-caption: 12px;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --lh-tight: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.7;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-eyebrow: 0.22em;

    /* ---------- Space ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 104px;
    --space-10: 144px;

    --section-pad: clamp(72px, 8vw, 128px);

    /* ---------- Layout ---------- */
    --container-max: 1320px;
    --container-pad: 40px;
    --container-pad-tablet: 30px;
    --container-pad-mobile: 20px;

    --header-height: 88px;
    --header-scrolled-height: 72px;
    --announcement-height: 42px;

    /* ---------- Radius ---------- */
    --radius-card: 6px;
    --radius-button: 4px;
    --radius-search: 6px;
    --radius-image: 6px;
    --radius-field: 4px;
    --radius-pill: 999px;

    /* ---------- Shadow (soft, cool, premium) ---------- */
    --shadow-sm: 0 1px 2px rgba(14, 37, 64, 0.06), 0 1px 3px rgba(14, 37, 64, 0.05);
    --shadow-md: 0 6px 24px rgba(14, 37, 64, 0.09);
    --shadow-lg: 0 18px 50px rgba(14, 37, 64, 0.16);
    --shadow-hover: 0 24px 64px rgba(14, 37, 64, 0.2);
    --shadow-card: 0 2px 8px rgba(14, 37, 64, 0.06), 0 12px 32px rgba(14, 37, 64, 0.1);

    /* ---------- Motion ---------- */
    --duration-fast: 250ms;
    --duration-base: 300ms;
    --duration-slow: 350ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Breakpoints ---------- */
    --bp-lg: 1200px;
    --bp-md: 1024px;
    --bp-sm: 768px;
    --bp-xs: 640px;
    --bp-xxs: 480px;
}

/* ---------- Responsive type scale ---------- */
@media (max-width: 1024px) {
    :root {
        --fs-hero: 50px;
        --fs-section: 36px;
        --fs-sub: 22px;
        --fs-property: 26px;
    }
}

@media (max-width: 640px) {
    :root {
        --fs-hero: 38px;
        --fs-section: 30px;
        --fs-property: 24px;
        --fs-sub: 20px;
        --fs-body: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}