/* OceanX — Bioluminescence global theme
   Design tokens, typography, navigation, focus, and skeleton patterns shared
   by every frontend page. Component colors flow through the --archive-* Tailwind
   mappings so existing utilities adopt the theme automatically. */
@font-face { font-family: 'Bio Display'; src: url('../fonts/big-shoulders.ttf') format('truetype'); font-weight: 100 900; font-display: optional; }
@font-face { font-family: 'Bio Text'; src: url('../fonts/zeist-regular.otf') format('opentype'); font-weight: 400; font-display: optional; }

:root {
    --bio-paper: 195 30% 97%; --bio-surface: 0 0% 100%; --bio-ink: 215 60% 12%;
    --bio-muted: 202 25% 32%; --bio-accent: 174 85% 23%; --bio-on-accent: 0 0% 100%;
    --bio-line: 202 22% 63%; --bio-skeleton: 200 22% 86%; --bio-radius: 12px;
    --bio-focus: var(--bio-accent);
    --bio-night: 216 69% 5%; --bio-mint: 165 77% 74%; --bio-white: 180 15% 94%;
    --bio-gutter: clamp(16px, 4vw, 64px); --bio-display: 'Bio Display', Impact, sans-serif;
    /* Motion tokens */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 300ms;
    --motion-reveal: 500ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    /* Tailwind archive palette → bioluminescence tokens (see public-utilities.css) */
    --archive-do: var(--bio-night); --archive-ob: var(--bio-accent); --archive-wb: 199 84% 42%;
    --archive-sf: 171 62% 38%; --archive-bp: var(--bio-paper); --archive-tp: var(--bio-ink);
    --archive-ts: var(--bio-muted); --archive-bd: 200 25% 86%;
}
html.dark {
    --bio-paper: 216 69% 5%; --bio-surface: 212 53% 9%; --bio-ink: 180 15% 94%;
    --bio-muted: 197 19% 72%; --bio-accent: 165 77% 74%; --bio-on-accent: 216 69% 5%;
    --bio-line: 207 23% 42%; --bio-skeleton: 211 37% 16%;
    --archive-wb: 189 93% 60%; --archive-sf: var(--bio-mint); --archive-bd: 207 23% 25%;
}

/* ── Typography scale ── */
body { font-family: 'Bio Text', 'Inter', system-ui, sans-serif; }
h1, h2, .bio-display { font-family: var(--bio-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; }

/* ── Base behavior ── */
[hidden] { display: none !important; }
:is(button, input, select) { font: inherit; }
:is(button, a) { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid hsl(var(--bio-focus)); outline-offset: 4px; }
#navbar, footer { --bio-focus: var(--bio-mint); }

/* ── Floating glass navigation (all pages) ── */
#navbar {
    top: 12px; left: var(--bio-gutter); right: var(--bio-gutter); max-width: 1408px; margin-inline: auto;
    border: 1px solid hsl(207 23% 36%); border-radius: 14px;
    background: hsl(var(--bio-night) / .84) !important; backdrop-filter: blur(20px); box-shadow: none !important;
}
#navbar > div { padding-inline: 22px; }
#navbar :is(.nl, .bg-btn, .nav-brand, .nav-menu-toggle, .dm-toggle) { color: hsl(var(--bio-white)) !important; }
#navbar .nl:hover, #navbar .nl[aria-current='page'] { background: hsl(var(--bio-mint) / .14); color: hsl(var(--bio-mint)) !important; }
@media (max-width: 767px) { #navbar > div { padding-inline: 12px; } }
html:not(.js) #navbar { position: relative; }

/* Skip link sits on the accent surface in both themes. */
a[href="#main-content"]:focus { color: hsl(var(--bio-on-accent)) !important; }

/* ── Footer ─ */
footer { background: hsl(var(--bio-night)) !important; }
footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* ── OceanX wordmark lockup (nav brand, footer brand) — globally available ── */
.nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; }
.bio-brand { display: flex; align-items: center; gap: 16px; color: inherit; }
.bio-brand img { display: block; width: 126px; height: 30px; }
.bio-brand small {
    font: 9px/1.5 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
    color: hsl(197 19% 72%); border-left: 1px solid hsl(207 23% 42%); padding-left: 16px;
}
@media (max-width: 1279px) { .bio-brand small { display: none; } }
@media (max-width: 640px)  { .bio-brand img { width: 104px; } }
.footer-brand { display: inline-flex; align-items: center; margin-bottom: 16px; color: inherit; text-decoration: none; }
.footer-brand img { display: block; width: 126px; height: 30px; max-width: 100%; }

/* ── Skeleton loading patterns ── */
main img.is-loading {
    background-color: hsl(var(--bio-skeleton));
    background-image: linear-gradient(100deg, transparent 25%, hsl(var(--bio-ink) / .09) 45%, transparent 65%);
    background-size: 300% 100%; animation: ocean-shimmer 1.6s infinite;
}
@keyframes ocean-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.ocean-skeleton { position: relative; overflow: hidden; border-radius: 6px; background: hsl(var(--bio-skeleton)); }
.ocean-skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 25%, hsl(var(--bio-ink) / .09) 45%, transparent 65%);
    transform: translateX(-100%); animation: ocean-slide 1.6s infinite;
}
@keyframes ocean-slide { to { transform: translateX(100%); } }