/* BlueHarbor Freight — base.css
   Tokens, reset, typography, reveal system. */

@property --g-tint { syntax: '<color>'; inherits: false; initial-value: rgba(240, 236, 230, .06); }

:root {
  /* Brand palette (fixed) */
  --navy-deep: #1B2F45;
  --navy-harbor: #2E4D6B;
  --steel: #3F6D9A;
  --sky: #5A84B5;
  --slate: #354D66;
  --cream: #F0ECE6;
  --ink: #1F3550;
  --mist: #A9BCD0;

  /* Derived shades / tints (palette-only) */
  --space-0: #050B13;
  --space-1: #09131F;
  --space-2: #0E1B2A;
  --space-3: #142639;
  --sky-hi: #CCDAE9;
  --steel-deep: #355F89;
  --ink-2: #4B5E75;
  --error: #B2463F;

  /* Type */
  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Shape & space */
  --r-xl: clamp(28px, 3.6vw, 52px);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --gutter: clamp(18px, 5vw, 88px);
  --maxw: 1480px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --pad-l: max(var(--gutter), calc(var(--safe-l) + 18px));
  --pad-r: max(var(--gutter), calc(var(--safe-r) + 18px));

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--space-0);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--space-0);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }

/* Links — zero-specificity defaults so component classes always win */
:where(a) { color: var(--sky-hi); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .3s var(--ease-out); }
:where(a:hover) { color: var(--cream); }
:where([data-theme="light"] a) { color: var(--steel-deep); }
:where([data-theme="light"] a:hover) { color: var(--ink); }

::selection { background: rgba(90, 132, 181, .5); color: #fff; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sky-hi); outline-offset: 3px; }
[data-theme="light"] :focus-visible { outline-color: var(--steel-deep); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 100; left: 16px; top: calc(var(--safe-t) + 12px);
  padding: 12px 18px; border-radius: 999px; background: var(--cream); color: var(--ink);
  font-weight: 600; text-decoration: none; transform: translateY(-180%);
  transition: transform .4s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Type primitives */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  font-stretch: 88%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
}
[data-theme="light"] .eyebrow { color: var(--steel-deep); }

.display {
  font-weight: 700;
  font-stretch: 70%;
  line-height: .9;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* Icons */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Reveal system: add data-reveal (and optional style="--d:120" delay in ms) */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.js [data-reveal="panel"] { filter: none; transform: translate3d(0, 40px, 0) scale(.98); }
html.js [data-reveal].is-in,
html.reveal-all [data-reveal] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal], html.js [data-reveal="panel"] { transform: none; filter: none; transition: opacity .5s linear; }
}