/* ==========================================================================
   Design tokens
   All reusable values for the website. main.css only references these.
   Base: 1rem = 16px (browser default).
   Palette is taken from the logo: near-black navy + the logo's water blue.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Typography: font families */
    --font-family-body: "Inter", system-ui, sans-serif;

    /* Typography: fluid font sizes (min, preferred, max) */
    --font-size-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    --font-size-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    --font-size-h3: 1.125rem;
    --font-size-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-eyebrow: 0.8125rem;
    --font-size-stat: 2.5rem;

    /* Typography: weights, line heights and letter spacing */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-body: 1.7;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-wide: 0.12em;
    --measure-text: 65ch;
    --measure-lead: 48ch;
    --measure-headline: 18ch;
    --underline-offset: 0.22em;

    /* Colors: brand */
    --color-ink: #0b1b2e;
    --color-ink-soft: #132a47;
    --color-brand: #1881d6;
    --color-brand-strong: #0b62ad;
    --color-brand-on-dark: #5aaef0;
    --color-brand-tint: #e6f1fb;

    /* Colors: neutrals */
    --color-background: #f7f5f0;
    --color-surface: #ffffff;
    --color-line: #e4e0d6;
    --color-line-on-dark: rgb(255 255 255 / 0.14);
    --color-line-on-dark-strong: rgb(255 255 255 / 0.4);
    --color-text: #1c2633;
    --color-text-muted: #4a5565;
    --color-on-dark: #f3f6fa;
    --color-on-dark-muted: #b6c3d4;
    --color-shadow: rgb(11 27 46 / 0.08);
    --color-shadow-strong: rgb(11 27 46 / 0.18);
    --color-overlay: rgb(11 27 46 / 0.75);

    /* Spacing scale */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-hair: 0.125rem;
    --spacing-button-block: 0.875rem;
    --spacing-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);

    /* Layout */
    --layout-max-width: 75rem;
    --layout-page-padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --layout-header-height: 4.5rem;
    --layout-card-min: 17rem;
    --layout-callbar-height: 4.5rem;

    /* Component sizes */
    --size-icon: 1.5rem;
    --size-icon-box: 3rem;
    --size-icon-sm: 1.125rem;
    --size-logo: 3.25rem;
    --size-hero-photo: 22rem;
    --size-hero-photo-sm: 15rem;
    --size-badge-max: 16rem;
    --size-blur: 0.5rem;
    --size-gallery-row: 15rem;
    --size-focus-ring: 0.1875rem;
    --size-accent-bar: 0.25rem;

    /* Icons (unitless SVG stroke widths) */
    --icon-stroke: 1.75;
    --icon-stroke-bold: 2.5;

    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999rem;

    /* Shadows */
    --shadow-card: 0 0.0625rem 0.125rem var(--color-shadow), 0 0.5rem 1.5rem var(--color-shadow);
    --shadow-raised: 0 1.5rem 3rem var(--color-shadow-strong);

    /* Motion */
    --transition-duration: 0.2s;
    --hover-lift: -0.125rem;
}