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

:root {
    /* Colour tokens. These are neutral defaults: each child theme sets its own
       palette in assets/css/site.css, which loads straight after this file.
       Each colour used with transparency also has an -rgb version. */

    /* Primary: headings, dark sections and the footer */
    --primary-900: #12263a;
    --primary-800: #1a3a5a;
    --primary-700: #20507c;
    --primary-600: #2a659b;

    /* Secondary: highlights and text on dark backgrounds */
    --secondary-500: #4a8fc7;
    --secondary-300: #b6d4ee;
    --secondary-100: #e8f1fa;

    /* Surface and border: page and section backgrounds */
    --surface-50: #fafaf7;
    --surface-100: #f1f0ea;
    --border-200: #dedbd0;

    /* Ink: body text */
    --ink-900: #1c1f24;
    --ink-700: #3a3f47;
    --ink-500: #5c626b;

    /* Accent: call-to-action buttons */
    --accent-500: #b4471a;
    --accent-600: #8f3613;
    --accent-ink: #ffffff;

    --white: #ffffff;

    /* Text on dark backgrounds */
    --on-dark: #eaf1f8;
    --on-dark-muted: #bfd0e2;

    /* RGB versions, for shadows and overlays */
    --ink-900-rgb: 28 31 36;
    --primary-950-rgb: 10 22 34;
    --primary-900-rgb: 18 38 58;
    --primary-700-rgb: 32 80 124;
    --accent-500-rgb: 180 71 26;
    --surface-50-rgb: 250 250 247;

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

    --shadow-sm: 0 1px 3px rgb(var(--ink-900-rgb) / 0.08), 0 1px 2px rgb(var(--ink-900-rgb) / 0.06);
    --shadow-md: 0 10px 30px rgb(var(--primary-900-rgb) / 0.14);
    --shadow-lg: 0 24px 60px rgb(var(--primary-900-rgb) / 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(--primary-600);
    --focus-ring-on-dark: 3px solid var(--secondary-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(--surface-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(--primary-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(--primary-700);
}

a:hover {
    color: var(--primary-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;
    }
}