/*
 * Solenne Atoll — design tokens. Every colour, face, size, space, duration,
 * easing, blur, breakpoint and z-index on the site lives here; site.css and
 * site.js only reference them (JS reads them once via getComputedStyle).
 * Prefix --s- (the gallery's own tokens are loaded too, for the ribbon).
 *
 * Contrast (WCAG 2.x, measured):
 *   reef #0b3a4a on sand #fbf2ea ........ 11.1:1   (all body text)
 *   reef-soft #2f5e6b on sand ........... 6.5:1    (captions, micro labels)
 *   reef on coral #f2866b ............... 4.9:1    (button label, 17px/600)
 *   sand on night #0b3a4a ............... 11.1:1   (footer)
 *   sand-dim #c9d6d3 on night ........... 7.9:1    (footer small text)
 * Coral never carries text on sand (2.2:1); it fills the CTA and marks only.
 */

@font-face {
    font-family: "Jost SA";
    src: url("fonts/jost-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader SA";
    src: url("fonts/newsreader-latin-italic.woff2") format("woff2");
    font-weight: 300 400;
    font-style: italic;
    font-display: swap;
}

/* The scrubbed clock of the day (0 = 06:10, 1 = 21:30). Registered so it interpolates. */
@property --sa-t {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    /* ── Palette ─────────────────────────────────────────────── */
    --s-sand: #fbf2ea;
    --s-sand-deep: #f4e3d6;
    --s-paper: #fffbf7;
    --s-reef: #0b3a4a;
    --s-reef-soft: #2f5e6b;
    --s-lagoon: #3fc1c0;
    --s-lagoon-deep: #2aa3aa;
    --s-shallows: #a8e6df;
    --s-shallows-pale: #d8f2ec;
    --s-coral: #f2866b;
    --s-coral-lift: #f4977f;
    --s-night: #0b3a4a;
    --s-night-deep: #072a36;
    --s-sand-dim: #c9d6d3;
    --s-star: #fff8e8;
    --s-line: #0b3a4a26;
    --s-line-strong: #0b3a4a59;
    --s-line-night: #fbf2ea2e;
    --s-nav-bg: #fbf2eae6;
    --s-sheet-bg: #fbf2ea;
    --s-shadow-lift: 0 1px 0 #0b3a4a1f, 0 10px 24px -12px #0b3a4a59;
    --s-shadow-lift-hover: 0 1px 0 #0b3a4a1f, 0 16px 30px -12px #0b3a4a66;
    --s-shadow-card: 0 1px 0 #0b3a4a14, 0 24px 48px -32px #0b3a4a59;
    --s-error: #9c2f1c;
    --s-focus: #0b3a4a;
    --s-plan-lit: #ffe3c9;          /* a room lit when you point at it in the key */
    --s-plan-lit-edge: #f2866b;
    --s-plan-water: #c7eee8;
    --s-plan-ripple: #ffffffb3;
    --s-plan-garden: #e3ead2;
    --s-plan-garden-dot: #b9c9a4;
    --s-plan-room: #fffbf7;
    --s-plan-deck: #ead9bd;
    --s-plan-glass: #7fd6d0;
    --s-plan-pool: #6fd3cf;
    --s-plan-wall: #0b3a4a;
    --s-reef-water: #bfe9e2;
    --s-reef-water-deep: #3fa9b4;
    --s-reef-ground: #eadfc6;
    --s-reef-ground-deep: #c9b99b;
    --s-reef-grass: #6e9c7a;
    --s-reef-coral: #e59a83;
    --s-reef-coral-2: #c9b48a;
    --s-reef-fish: #0b3a4a;
    --s-reef-strata-2: 0.5;
    --s-reef-strata-3: 0.3;
    --s-reef-ray: 0.42;
    --s-chart-bar: #a8e6df;
    --s-chart-bar-best: #3fc1c0;
    --s-chart-track: #0b3a4a12;

    /* The day: five lit states of one scene. Every colour of every stop is a token. */
    --s-day-dawn-sky-top: #d9cfe0;
    --s-day-dawn-sky-low: #f8d6bd;
    --s-day-dawn-sea-far: #c9d9d8;
    --s-day-dawn-sea-near: #98c6c8;
    --s-day-dawn-ground: #ecdcc4;
    --s-day-dawn-wall: #c9ad8e;
    --s-day-dawn-roof: #a78d74;
    --s-day-dawn-sun: #fff1de;

    --s-day-morning-sky-top: #8fd0e3;
    --s-day-morning-sky-low: #e6f5f1;
    --s-day-morning-sea-far: #63cbc8;
    --s-day-morning-sea-near: #3fc1c0;
    --s-day-morning-ground: #f4e6d0;
    --s-day-morning-wall: #e3cfae;
    --s-day-morning-roof: #b99b78;
    --s-day-morning-sun: #fffdf6;

    --s-day-afternoon-sky-top: #76c3dc;
    --s-day-afternoon-sky-low: #dcf3ef;
    --s-day-afternoon-sea-far: #7fd9d2;
    --s-day-afternoon-sea-near: #a8e6df;
    --s-day-afternoon-ground: #f3e8d4;
    --s-day-afternoon-wall: #e8d4b2;
    --s-day-afternoon-roof: #bf9f79;
    --s-day-afternoon-sun: #fffaf0;

    --s-day-dusk-sky-top: #c98f9a;
    --s-day-dusk-sky-low: #f6b48f;
    --s-day-dusk-sea-far: #e3a58e;
    --s-day-dusk-sea-near: #a98993;
    --s-day-dusk-ground: #dcb79a;
    --s-day-dusk-wall: #a77a66;
    --s-day-dusk-roof: #7c5a52;
    --s-day-dusk-sun: #ffd2a6;

    --s-day-night-sky-top: #04161f;
    --s-day-night-sky-low: #0b3a4a;
    --s-day-night-sea-far: #0d4151;
    --s-day-night-sea-near: #062833;
    --s-day-night-ground: #183c45;
    --s-day-night-wall: #0e2f3a;
    --s-day-night-roof: #0a2530;
    --s-day-night-sun: #fbf2ea;

    --s-day-window-dark: #0e2f3a;
    --s-day-window-lit: #ffd59a;
    --s-day-glow: #ffd59a;
    --s-day-foam: #ffffff;
    --s-day-moon: #fbf2ea;
    --s-day-thatch-ink: #3a2a20;

    /* ── Type ────────────────────────────────────────────────── */
    --s-font-display: "Jost SA", "Avenir Next", "Segoe UI", sans-serif;
    --s-font-body: "Jost SA", "Avenir Next", "Segoe UI", sans-serif;
    --s-font-italic: "Newsreader SA", "Iowan Old Style", Georgia, serif;
    --s-weight-display: 300;
    --s-weight-light: 300;
    --s-weight-body: 400;
    --s-weight-strong: 500;
    --s-weight-button: 560;
    --s-step-hero: clamp(3.5rem, 2rem + 6.4vw, 8.4rem);
    --s-step-h2: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
    --s-step-h3: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
    --s-step-figure: clamp(3rem, 2rem + 3.6vw, 5.4rem);
    --s-step-hero-line: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem);
    --s-step-pull: clamp(1.2rem, 1rem + 0.55vw, 1.45rem);
    --s-step-lede: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    --s-step-body: 1.125rem;
    --s-step-small: 1rem;
    --s-step-micro: 0.9375rem;
    --s-step-tide: clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
    --s-step-hour: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem);
    --s-step-wordmark: 1.3rem;
    --s-step-foot-mark: clamp(3rem, 1.6rem + 6vw, 7.5rem);
    --s-leading-body: 1.65;
    --s-leading-tight: 0.92;
    --s-leading-head: 1.08;
    --s-tracking-display: 0.012em;
    --s-tracking-head: 0.004em;
    --s-tracking-wordmark: 0.06em;

    /* ── Space and layout ────────────────────────────────────── */
    --s-gutter: clamp(20px, 4.4vw, 72px);
    --s-gap: clamp(16px, 2vw, 32px);
    --s-gap-lg: clamp(28px, 4vw, 64px);
    --s-section: clamp(72px, 8vw, 128px);
    --s-section-tight: clamp(40px, 4.4vw, 72px);
    --s-max: 1320px;
    --s-measure: 38rem;
    --s-measure-wide: 46rem;
    --s-radius: 14px;
    --s-radius-lg: 22px;
    --s-radius-sm: 8px;
    --s-btn-radius: 6px;            /* primary button: a crisp soft-cornered rectangle — deliberately distinct from any fully-rounded pill */
    --s-nav-h: 72px;
    --s-touch: 48px;
    --s-hairline: 1px;
    --s-tide-glyph: 34px;
    --s-hero-art-w: 62%;
    --s-hero-gap: clamp(20px, 3.8vh, 42px);
    --s-hero-art-m-h: min(372px, 45svh);
    --s-hero-art-m-h-fallback: min(372px, 45vh);
    --s-carousel-peek: 84%;
    --s-plan-max-w: 19;
    --s-plan-badge-scale: 1;
    /* Calendar glyph for the date fields: a page with two rings and a tide line, in reef ink */
    --s-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3a4a' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4M7 15q2.5-2 5 0t5 0'/%3E%3C/svg%3E");
    --s-icon-size: 22px;
    --s-z-nav: 50;
    --s-z-sheet: 60;
    --s-z-skip: 70;

    /* ── Motion ──────────────────────────────────────────────── */
    --s-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
    --s-ease-gsap: power2.out;
    --s-dur-fast: 180ms;
    --s-dur: 420ms;
    --s-dur-slow: 1100ms;
    --s-dur-reveal: 1.4;
    --s-stagger: 0.12;
    --s-reveal-y: 28;
    --s-fish-drift: 22s;
    --s-fish-drift-2: 31s;
    --s-fish-dx: 26px;
    --s-tide-dur: 9s;
    --s-tide-dy: 3px;
    --s-blur-nav: 14px;
    --s-blur-caustic: 2.5px;

    /* Caustics canvas (hero): render small, upscale soft, cap the frame rate */
    --s-caustic-scale: 0.3;
    --s-caustic-max: 240;
    --s-caustic-dpr-cap: 1.5;
    --s-caustic-fps: 24;
    --s-caustic-speed: 0.00021;
    --s-caustic-alpha: 0.9;
    --s-caustic-sharp: 4;
    --s-caustic-iter: 3;
    --s-caustic-zoom: 5.2;
    --s-caustic-opacity: 0.62;

    /* The day passes */
    --s-day-pin: 220vh;
    --s-day-fade: 0.035;
    --s-day-sun-x0: 120;
    --s-day-sun-x1: 1080;
    --s-day-sun-rise: 210;
    --s-day-tide-rise: 14;
    --s-day-scrub: 0.6;
    --s-day-horizon: 312;
    --s-day-card-shift: 18px;
    --s-day-card-fade: 0.022;
    --s-day-near: 0.07;
    --s-day-refl: 0.34;
    --s-day-eave-shade: 0.32;
    --s-day-shimmer-dx: 9px;
    --s-day-shimmer-turns: 5;
    --s-day-shimmer-calm: 0.35;
    --s-day-shimmer-o: 0.7;
    --s-day-stage-h: 64%;
    --s-day-stage-min: 0.42;
    --s-day-stage-max: 0.7;
    --s-strip-ratio: 4 / 5;
    --s-reef-ratio-m: 1200 / 860;
    --s-reef-head-x: 2.5cqw;          /* the reef title, set in the lagoon water of the drawing */
    --s-reef-head-y: 6.4cqw;
    --s-reef-head-w: 46cqw;
    --s-reef-pool: #bfe9e4e0;
    --s-reef-pool-inset: -6px -48px -32px -24px;
    --s-step-reef-head: clamp(1.9rem, 3.4cqw, 3.2rem);
    --s-cap-bg: #fffbf7d9;           /* the caption chip on the day scene (paper, slightly clear) */
    --s-cap-blur: 8px;
    --s-chart-col-h: 210px;          /* the water chart, as standing bars */
    --s-chart-col-floor: 18%;
    --s-chart-col-head: 22px;
    --s-ribbon-h: 34px;
    --s-reveal-start: top 88%;
    --s-route-start: top 80%;
    --s-route-end: bottom 60%;
    --s-spy-margin: -40% 0px -55% 0px;
    --s-mask-on: #ffffff;
    --s-mask-off: #000000;
    --s-mask-fade: #ffffff;

    /* Breakpoints (JS reads these; CSS uses the same numbers in @media) */
    --s-bp-desk: (min-width: 900px);
    --s-bp-wide: (min-width: 1200px);

    /* -- added: type scale + length tokens collected from site.css literals -- */
    --s-leading-135: 1.35;
    --s-leading-120: 1.2;
    --s-leading-100: 1;
    --s-underline-start: 0;
    --s-leading-130: 1.3;
    --s-leading-140: 1.4;
}

/* ── Space scale and component metrics (site.css carries no literal lengths) ── */
:root {
    --s-nav-links-gap: clamp(12px, 2vw, 32px);
    --s-nav-item-gap: clamp(4px, 1.4vw, 22px);
    --s-hero-pad-y: clamp(24px, 4vh, 56px);
    --s-plan-pad: clamp(18px, 2.4vw, 32px);
    --s-card-pad: clamp(20px, 2.4vw, 32px);
    --s-day-head-gap: clamp(20px, 3vw, 40px);
    --s-day-gap: clamp(14px, 2.4vh, 28px);
    --s-day-pad-top: clamp(10px, 2vh, 24px);
    --s-day-pad-bottom: clamp(14px, 3vh, 36px);
    --s-day-foot-gap: clamp(12px, 2vh, 24px);
    --s-form-pad: clamp(22px, 3vw, 40px);
    --s-foot-pad-top: clamp(80px, 12vw, 160px);
    --s-step-input: max(16px, var(--s-step-body));
    --s-hero-copy-w: min(40%, 34rem);
    --s-select-arrow-pos: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
    /* SVG stroke weights, thinnest first (user units) */
    --s-stroke-1: 0.7;
    --s-stroke-2: 0.8;
    --s-stroke-3: 0.9;
    --s-stroke-4: 1.1;
    --s-stroke-5: 1.2;
    --s-stroke-6: 1.3;
    --s-stroke-7: 1.4;
    --s-stroke-8: 1.6;
    --s-stroke-9: 2;
    --s-stroke-10: 2.2;
    --s-stroke-11: 2.4;
    --s-stroke-12: 2.5;
    --s-stroke-13: 2.6;
    --s-stroke-14: 3;
    --s-stroke-15: 4;
    --s-stroke-16: 8;
    --s-plan-dash: 5 4;
    --s-head-tide-pad: 0.9em;
    --s-shadow-invalid: inset 0 0 0 1px var(--s-error);
    --s-space-1: 2px;
    --s-space-2: 4px;
    --s-space-3: 6px;
    --s-space-4: 8px;
    --s-space-5: 10px;
    --s-space-6: 12px;
    --s-space-7: 14px;
    --s-space-8: 16px;
    --s-space-9: 18px;
    --s-space-10: 20px;
    --s-space-11: 22px;
    --s-space-12: 24px;
    --s-space-13: 28px;
    --s-space-14: 32px;
    --s-space-15: 40px;
    --s-space-16: 48px;
    --s-space-17: 56px;
    --s-focus-w: 2px;
    --s-focus-off: 4px;
    --s-focus-off-sm: 3px;
    --s-focus-off-xs: 1px;
    --s-underline-w: 2px;
    --s-underline-off-hover: 4px;
    --s-underline-off: 7px;
    --s-lift: -2px;
    --s-touch-min: 44px;
    --s-sheet-row: 60px;
    --s-textarea-min: 96px;
    --s-menu-btn-w: 76px;
    --s-sheet-time-w: 3.4em;
    --s-submit-min: 14rem;
    --s-rule-w: 2px;
    --s-rule-w-bold: 3px;
    --s-nav-underline-y: 10px;
    --s-nav-underline-inset: 12px;
    --s-title-optical: -0.05em;
    --s-hero-line-measure: 22em;
    --s-measure-narrow: 22rem;
    --s-plane-glyph: 36px;
    --s-key-dot: 20px;
    --s-step-badge: 0.72rem;
    --s-facts-label-w: 6.5rem;
    --s-plan-marker-size: 7px;
    --s-plan-scale-size: 9px;
    --s-ruler-h: 34px;
    --s-ruler-line-y: 7px;
    --s-ruler-dot: 16px;
    --s-badge: 32px;
    --s-badge-m: 30px;
    --s-reef-sides-end: 3.6rem;
    --s-route-pad: 34px;
    --s-route-pad-m: 38px;
    --s-route-line-y: 49px;
    --s-route-inset: 8px;
    --s-route-tail: 40px;
    --s-route-dot: 18px;
    --s-route-dot-x: -38px;
    --s-route-leg-y: -32px;
    --s-route-leg-x: 9px;
    --s-know-label-w: 9.5rem;
    --s-seam: clamp(48px, 5vw, 80px);   /* between sections that already end in a strong edge */
    --s-chart-month-w: 3.4rem;
    --s-bar-h: 10px;
    --s-bar-r: 5px;
    --s-chart-val-w: 2.4rem;
    --s-chart-best-w: 2.8rem;
    --s-chart-best-gap: 3.4rem;
    --s-chart-key-w: 14px;
    --s-step-num-w: 2rem;
    --s-select-arrow: 6px;
    --s-bullet: 4px;
}

@media (max-width: 899px) {
    :root {
        --s-nav-h: 60px;
        --s-day-pin: 100vh;
        --s-day-stage-h: 52%;
        --s-ribbon-h: 52px;
        --s-day-sun-x0: 400;
        --s-day-sun-x1: 800;
        --s-day-sun-rise: 190;
        --s-plan-badge-scale: 1.5;
    }
}