/* ==========================================================================
   Sponsor Harbor — design tokens
   The single source of truth for color, type, space, radius, shadow and motion.
   Component CSS and JS read only these names. No hex values or raw durations
   live anywhere else.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Color: raw palette ---------------------------------------------- */
  --palette-paper: #fbf8f3;
  --palette-white: #ffffff;
  --palette-sand-100: #f4efe6;
  --palette-sand-200: #e7dfd1;
  --palette-ink-900: #0e2a3f;
  --palette-ink-700: #3a5265;
  --palette-sea-50: #eef5fd;
  --palette-sea-100: #dcebfb;
  --palette-sea-200: #bcd8f6;
  --palette-sea-300: #8dbcef;
  --palette-sea-400: #4f97e3;
  --palette-sea-600: #0b5fc4;
  --palette-sea-700: #094c9e;
  --palette-sea-900: #0a2f5c;
  --palette-buoy-400: #ff7a45;
  --palette-buoy-500: #ff5a1f;
  --palette-buoy-700: #b83a0a;
  --palette-sun-300: #ffd27a;
  --palette-sun-400: #ffb547;
  --palette-kelp-600: #0b7a52;
  --palette-sun-100: #fff1dc;
  --palette-wood-400: #b98a5e;
  --palette-wood-600: #8a5f3a;
  --palette-crate-300: #f2c48d;
  --palette-crate-500: #d99b55;
  --palette-coin-600: #e08a12;

  /* ---- Color: roles ---------------------------------------------------- */
  --color-bg: var(--palette-paper);
  --color-bg-alt: var(--palette-sand-100);
  --color-surface: var(--palette-white);
  --color-text: var(--palette-ink-900);
  --color-text-soft: var(--palette-ink-700);
  --color-line: var(--palette-sand-200);
  --color-brand: var(--palette-sea-600);
  --color-brand-strong: var(--palette-sea-700);
  --color-brand-deep: var(--palette-sea-900);
  --color-brand-tint: var(--palette-sea-50);
  --color-accent: var(--palette-buoy-500);
  --color-accent-text: var(--palette-buoy-700);
  --color-success: var(--palette-kelp-600);
  --color-on-brand: var(--palette-white);
  --color-focus: var(--palette-buoy-700);
  --color-focus-on-dark: var(--palette-sun-300);
  --color-accent-soft: var(--palette-buoy-400);
  --color-accent-on-dark: var(--palette-buoy-400);
  --color-warm-tint: var(--palette-sun-100);
  --color-line-strong: var(--palette-sea-300);
  --color-header-bg: rgb(251 248 243 / 0.94);           /* paper at 94% */
  --color-on-dark: var(--palette-white);
  --color-on-dark-soft: var(--palette-sea-100);
  --color-on-dark-line: rgb(255 255 255 / 0.5);

  /* Scene colors (hero film + route) */
  --scene-sky-top: var(--palette-sea-100);
  --scene-sky-bottom: var(--palette-sea-50);
  --scene-sun: var(--palette-sun-400);
  --scene-sea-back: var(--palette-sea-300);
  --scene-sea-mid: var(--palette-sea-400);
  --scene-sea-front: var(--palette-sea-600);
  --scene-sea-deep: var(--palette-sea-700);
  --scene-hull: var(--palette-ink-900);
  --scene-hull-stripe: var(--palette-buoy-500);
  --scene-hull-rim: var(--palette-ink-700);
  --scene-wood: var(--palette-wood-400);
  --scene-wood-dark: var(--palette-wood-600);
  --scene-tower: var(--palette-white);
  --scene-tower-band: var(--palette-buoy-500);
  --scene-lamp: var(--palette-sun-300);
  --scene-lamp-glow: rgb(255 210 122 / 0.9);
  --scene-lamp-beam: rgb(255 210 122 / 0.75);
  --scene-sun-halo: rgb(255 181 71 / 0.18);
  --scene-card: var(--palette-white);
  --scene-thumb: var(--palette-sea-200);
  --scene-play: var(--palette-buoy-500);
  --scene-ink-line: var(--palette-sand-200);
  --scene-ink-line-soft: var(--palette-sand-100);
  --scene-tag: var(--palette-buoy-500);
  --scene-tag-text: var(--palette-white);
  --scene-paid: var(--palette-kelp-600);
  --scene-box: var(--palette-crate-300);
  --scene-box-dark: var(--palette-crate-500);
  --scene-coin: var(--palette-sun-400);
  --scene-coin-edge: var(--palette-coin-600);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;                                   /* 13 */
  --text-sm: 0.9375rem;                                   /* 15 */
  --text-base: 1.0625rem;                                 /* 17 */
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.08em;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Space (4px grid, in rem) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --width-page: 75rem;
  --width-text: 38rem;
  --width-narrow: 48rem;
  --header-height: 4.25rem;
  --tap-min: 3rem;                                        /* 48px touch target */
  --tap-large: 3.5rem;
  --contact-actions: 22rem;

  /* ---- Small component sizes ------------------------------------------ */
  --buoy-size: 2.75rem;
  --niche-icon: 3.5rem;
  --plus-size: 0.875rem;
  --check-size: 0.75rem;
  --check-lift: -0.1rem;
  --check-top: 0.45rem;
  --icon-bar-width: 1.25rem;
  --icon-bar-gap: 0.375rem;
  --dash: 6px;
  --wave-thickness: 0.06em;
  --wave-offset: 0.2em;
  --press-scale: 0.97;
  --skip-hidden-shift: -200%;
  --route-anchor: 50vh;                                   /* boat sits at screen middle */

  /* ---- Radius / border / shadow --------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.375rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --focus-ring: 3px;
  --focus-offset: 3px;

  --shadow-sm: 0 1px 2px rgb(14 42 63 / 0.06), 0 1px 1px rgb(14 42 63 / 0.04);
  --shadow-md: 0 6px 18px -6px rgb(14 42 63 / 0.16), 0 2px 4px rgb(14 42 63 / 0.05);
  --shadow-lg: 0 24px 48px -18px rgb(14 42 63 / 0.28), 0 4px 10px rgb(14 42 63 / 0.06);
  --shadow-brand: 0 10px 24px -10px rgb(11 95 196 / 0.6);

  /* ---- Layers ---------------------------------------------------------- */
  --z-scene-back: 1;
  --z-scene-mid: 2;
  --z-scene-front: 3;
  --z-scene-fx: 4;
  --z-scene-lead: 3;                                      /* creator boat: its tag and coin fly over the brand boat */
  --z-header: 10;
  --z-menu: 20;

  /* ---- Motion: easings -------------------------------------------------
     One motion language: "buoyant". Things glide in with weight, settle with
     a small overshoot like a hull meeting water, then float. */
  --ease-glide: cubic-bezier(0.22, 0.8, 0.24, 1);        /* long, heavy travel */
  --ease-dock: cubic-bezier(0.34, 1.45, 0.5, 1);         /* settle with overshoot */
  --ease-toss: cubic-bezier(0.45, 0, 0.55, 1);           /* thrown objects */
  --ease-float: cubic-bezier(0.37, 0, 0.63, 1);          /* idle sine float */
  --ease-ui: cubic-bezier(0.2, 0.7, 0.3, 1);             /* buttons, taps */

  /* ---- Motion: durations ----------------------------------------------- */
  --dur-instant: 1ms;
  --dur-play: 1800ms;
  --dur-notice: 2400ms;
  --dur-tap: 140ms;
  --dur-ui: 220ms;
  --dur-sail: 1500ms;
  --dur-dock: 520ms;
  --dur-rope: 420ms;
  --dur-toss: 760ms;
  --dur-snap: 360ms;
  --dur-coin: 1100ms;
  --dur-pop: 420ms;
  --dur-beam: 1300ms;
  --dur-bob: 4200ms;
  --dur-swell: 9000ms;
  --dur-swell-slow: 14000ms;

  /* ---- Motion: hero film timeline (start times) ------------------------ */
  --at-sail: 150ms;
  --at-dock: 1500ms;
  --at-rope: 1850ms;
  --at-toss: 2150ms;
  --at-coin: 3050ms;
  --at-paid: 4050ms;
  --at-beam: 3900ms;
  --at-float: 4400ms;

  /* ---- Scene geometry (in container units of the scene stage) ---------- */
  --scene-ratio: 5 / 4;
  --scene-sail-distance: 70cqi;
  --scene-bob-rise: 0.9cqi;
  --scene-bob-tilt: 1.6deg;
  --scene-swell-shift: -50%;
  --scene-dock-squash: 0.96;
  --scene-plank-stowed: -95deg;
  --scene-plank-rest: -16deg;
  --scene-sticker-tilt: -6deg;
  --scene-beam-start: -15deg;
  --scene-beam-rest: -158deg;
  --scene-beam-opacity: 0.45;
  --scene-beam-peak: 0.95;
  --scene-glow-rest: 0.7;
  --scene-progress-start: 0.06;
  --scene-progress-rest: 0.8;
  --scene-coin-hop: 4cqi;
  /* Sponsor tag: crate sticker -> creator's timeline. These are fallbacks;
     site.js measures the real distances on load and on resize. */
  --scene-toss-x: 55cqi;
  --scene-toss-y: -1.5cqi;
  --scene-toss-arc: -16cqi;
  /* Coin: brand crate -> lighthouse lamp -> creator card (fallbacks too) */
  --scene-coin-start-x: 49cqi;
  --scene-coin-start-y: 17cqi;
  --scene-coin-mid-x: 19cqi;
  --scene-coin-mid-y: -18cqi;
}