/* =====================================================================
   PrimeHarbor — style.css  (tokens, reset, base typography)
   Australian Fishing, Boating & Coastal Adventure Platform
   ===================================================================== */

:root {
  --ocean: #0A84FF;
  --ocean-deep: #1565D8;
  --navy: #0A2540;
  --navy-900: #071A2F;
  --cyan: #22D3EE;
  --cyan-soft: #7FE7F3;
  --white: #FFFFFF;
  --light: #F2F6FB;
  --cool: #9AAAC0;
  --sand: #F0E6D2;
  --charcoal: #141A24;
  --ink: #16202E;

  --muted: #5C6B80;
  --line: rgba(10,37,64,.12);
  --line-light: rgba(255,255,255,.16);

  --g-hero: linear-gradient(135deg, #0A2540 0%, #0A84FF 58%, #22D3EE 120%);
  --g-panel: linear-gradient(160deg, #0A84FF, #1565D8);
  --g-cyan: linear-gradient(120deg, #0A84FF, #22D3EE);
  --g-navy: linear-gradient(165deg, #0A2540, #071A2F);

  --ff-display: 'Sora', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --wide: 1400px;
  --gutter: clamp(20px, 4vw, 46px);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-pill: 999px;

  --sh-1: 0 14px 34px -20px rgba(10,37,64,.45);
  --sh-2: 0 30px 70px -34px rgba(10,37,64,.55);
  --sh-blue: 0 20px 44px -22px rgba(10,132,255,.7);
  --ring: 0 0 0 3px rgba(34,211,238,.45);

  --ease: cubic-bezier(.22,1,.36,1);
  --t: 380ms var(--ease);
  --t-fast: 200ms var(--ease);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-size: 17px; line-height: 1.7; color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,picture,video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
::selection { background: var(--cyan); color: var(--navy); }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 700; line-height: 1.08; color: var(--navy); letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
h4 { font-size: 1.2rem; font-weight: 600; }
p { color: var(--muted); }
.lead { font-size: clamp(1.12rem, 1.7vw, 1.4rem); color: #3a4655; line-height: 1.6; }
strong { color: var(--ink); font-weight: 600; }

/* gradient text accent */
.grad-text { background: var(--g-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.on-dark { color: #fff; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255,255,255,.78); }
.on-dark .lead { color: rgba(255,255,255,.9); }

/* ---------- eyebrow ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:.6em; font-family: var(--ff-display); font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--ocean); }
.eyebrow::before { content:""; width:26px; height:2px; background: var(--cyan); border-radius:2px; }
.eyebrow--center { justify-content:center; }
.on-dark .eyebrow { color: var(--cyan-soft); }
.headline { max-width: 60ch; }
.headline--center { margin-inline:auto; text-align:center; }

/* selection helpers used across pages */
.text-balance { text-wrap: balance; }
.muted { color: var(--muted); }
.cyan { color: var(--cyan); } .ocean { color: var(--ocean); } .navy { color: var(--navy); }

/* skip + reading progress */
.skip { position:absolute; left:-999px; top:0; background: var(--navy); color:#fff; padding:.7em 1.1em; border-radius:0 0 var(--r-sm) 0; z-index:400; }
.skip:focus { left:0; }
.read-progress { position:fixed; top:0; left:0; height:3px; width:0; background: var(--g-cyan); z-index:160; transition: width 80ms linear; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }