/* ==========================================================================
   HARBOUR ONE GROUP — DESIGN TOKENS
   Single source of truth for colour, type, spacing, motion and layout.
   ========================================================================== */

:root {
  /* ---- Colour: core ---- */
  --c-navy-deep: #07141F;
  --c-navy: #0B1D2A;
  --c-navy-secondary: #102533;
  --c-navy-line: rgba(245, 244, 240, 0.12);
  --c-navy-line-strong: rgba(245, 244, 240, 0.22);

  --c-off-white: #F5F4F0;
  --c-white: #FFFFFF;
  --c-grey-muted: #8A949C;
  --c-grey-line: rgba(7, 20, 31, 0.12);
  --c-grey-line-strong: rgba(7, 20, 31, 0.22);

  /* ---- Colour: accent (restrained champagne / warm sand) ---- */
  --c-accent: #B9A27B;
  --c-accent-light: #D9CBAE;
  --c-accent-dim: rgba(185, 162, 123, 0.35);
  --c-accent-wash: rgba(185, 162, 123, 0.08);

  /* ---- Colour: semantic ---- */
  --c-success: #4C7A61;
  --c-error: #9B4A3F;

  /* ---- Surfaces (light section) ---- */
  --surface-bg: var(--c-off-white);
  --surface-bg-alt: var(--c-white);
  --surface-text: var(--c-navy-deep);
  --surface-text-muted: #55626D;
  --surface-border: var(--c-grey-line);

  /* ---- Surfaces (dark section) ---- */
  --surface-dark-bg: var(--c-navy-deep);
  --surface-dark-bg-alt: var(--c-navy-secondary);
  --surface-dark-text: var(--c-off-white);
  --surface-dark-text-muted: rgba(245, 244, 240, 0.64);
  --surface-dark-border: var(--c-navy-line);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl: clamp(3rem, 3.2vw + 2.2rem, 6.75rem);
  --fs-display-l: clamp(2.4rem, 2.6vw + 1.8rem, 4.75rem);
  --fs-display-m: clamp(1.9rem, 1.6vw + 1.5rem, 3.1rem);
  --fs-heading-l: clamp(1.5rem, 1vw + 1.2rem, 2.1rem);
  --fs-heading-m: clamp(1.2rem, 0.5vw + 1.05rem, 1.5rem);
  --fs-heading-s: 1.125rem;
  --fs-body-l: 1.1875rem;
  --fs-body: 1rem;
  --fs-body-s: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  --section-pad-y: clamp(4.5rem, 6vw, 8rem);
  --section-pad-x: clamp(1.25rem, 5vw, 5rem);

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-narrow: 860px;
  --grid-gap: clamp(1.25rem, 2vw, 2.5rem);

  /* ---- Radii (near-architectural: minimal rounding) ---- */
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--surface-border);
  --border-hairline-dark: 1px solid var(--surface-dark-border);

  /* ---- Shadow (used sparingly) ---- */
  --shadow-s: 0 2px 12px rgba(7, 20, 31, 0.06);
  --shadow-m: 0 12px 40px rgba(7, 20, 31, 0.10);
  --shadow-l: 0 24px 80px rgba(7, 20, 31, 0.16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 900ms;
  --dur-cinematic: 1600ms;

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-cookie: 400;

  /* ---- Breakpoints (reference only; used in media queries directly) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1600px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-cinematic: 0ms;
  }
}