/* ==========================================================================
   Base: design tokens, reset, element defaults, focus
   ========================================================================== */

:root {
    /* Fjord: deep blues for headings, dark sections and the footer */
    --fjord-900: #0b2a3c;
    --fjord-800: #12405a;
    --fjord-700: #17577a;
    --fjord-600: #1f6f99;

    /* Glacier: icy blues for accents and highlights */
    --glacier-500: #3a9cc8;
    --glacier-300: #9fd3ea;
    --glacier-100: #e3f2f9;

    /* Snow and mist: page and section backgrounds, borders */
    --snow-50: #f6f9fb;
    --mist-100: #e9f0f4;
    --mist-200: #d3e0e8;

    /* Ink: body text */
    --ink-900: #10202b;
    --ink-700: #2d4452;
    --ink-500: #4f6676;

    /* Salmon: warm call-to-action accent */
    --salmon-500: #f4a259;
    --salmon-600: #e8873a;
    --salmon-ink: #2b1605;

    --white: #ffffff;

    /* Text on dark backgrounds */
    --on-dark: #e4f1f8;
    --on-dark-muted: #b9d3e2;

    --maxw: 73.75rem;
    --gutter: 1.25rem;
    --radius: 0.875rem;
    --radius-lg: 1.375rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgb(16 32 43 / 0.08), 0 1px 2px rgb(16 32 43 / 0.06);
    --shadow-md: 0 10px 30px rgb(11 42 60 / 0.14);
    --shadow-lg: 0 24px 60px rgb(11 42 60 / 0.2);

    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Icons (used as backgrounds and masks) */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a3c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
    --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");

    --focus-ring: 3px solid var(--fjord-600);
    --focus-ring-on-dark: 3px solid var(--glacier-300);
    --header-height: 4.25rem;
}

/* Reset ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-900);
    background: var(--snow-50);
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button {
    font: inherit;
}

/* Element defaults ------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--fjord-900);
}

h1 {
    font-size: clamp(2.05rem, 4.8vw, 3.3rem);
}

h2 {
    font-size: clamp(1.65rem, 3.4vw, 2.4rem);
}

h3 {
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--fjord-700);
}

a:hover {
    color: var(--fjord-600);
}

/* Focus ------------------------------------------------------------------ */

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* Override any motion, including third-party widgets */
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}