/* ==========================================================================
   Agent Harbor brand layer (October 2026). Loaded last on every page.
   Kit: harbor-ops/brand/BRAND.md (tokens.css there is the source for these values).
   Fonts: Sora headings and wordmark, Inter copy and UI, JetBrains Mono for code.
   ========================================================================== */
:root {
  --ah-navy: #022242;
  --ah-deep: #011830;
  --ah-swell: #0d4a7a;
  --ah-tide: #2e6ea6;
  --ah-spray: #7aabcf;
  --ah-foam: #c8dff0;
  --ah-gold: #c9a84c;
  --ah-gold-ink: #8a6a12;
  --ah-paper: #f4f6f8;
  --ah-ink: #0f2236;
  --ah-muted: #4a5a6c;
  --ah-rule: #d9e2ec;
  --ah-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ah-head: 'Sora', 'Inter', system-ui, sans-serif;
  --ah-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Headings: Sora with the logo's tight tracking. Sizes and weights stay with each page. */
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
code, kbd, samp, pre { font-family: var(--ah-mono); }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--ah-foam); color: var(--ah-navy); }

/* Gold focus ring everywhere (BRAND.md, accessibility) */
:focus-visible { outline: 3px solid var(--ah-gold); outline-offset: 2px; }

/* Wave animation for pages that don't load typography.css (industry pages, tools) */
.wave-g1 { animation: wave-drift 14s linear infinite; }
.wave-g2 { animation: wave-drift 10s linear infinite reverse; }
.wave-g3 { animation: wave-drift 8s linear infinite; }
.wave-g4 { animation: wave-drift 6s linear infinite reverse; }
.wave-g5 { animation: wave-drift 4.5s linear infinite; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.footer-wave { display: block; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -4px; position: relative; }
.footer-wave svg { display: block; width: 200%; height: auto; min-height: 90px; }
@media (max-width: 48rem) { .footer-wave svg { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .wave-g1, .wave-g2, .wave-g3, .wave-g4, .wave-g5 { animation: none; }
}

/* Compact wave strip (.ah-waves + harbor-ops/brand/waves.svg) for small pages */
.ah-waves { position: relative; overflow: hidden; line-height: 0; pointer-events: none; }
.ah-waves svg { display: block; width: 200%; height: 48px; }
.ah-waves .w1 { animation: wave-drift 16s linear infinite; }
.ah-waves .w2 { animation: wave-drift 11s linear infinite reverse; }
.ah-waves .w3 { animation: wave-drift 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ah-waves .w1, .ah-waves .w2, .ah-waves .w3 { animation: none; } }

@media print { .footer-wave, .ah-waves, .wave-ocean { display: none !important; } }