/* ============================================================
   Abyssal Towline — design tokens
   Midnight blue water, luminescent mint cargo, golden lamps.
   ============================================================ */
:root {
  --abyss: #04070d;
  --abyss-2: #070d18;
  --deep: #0b1a2c;
  --steel: #14293d;
  --line: #1d3a52;

  --ink: #e8f4f2;
  --ink-soft: #8fa9b6;
  --ink-dim: #5f7787;

  --mint: #6ff2c8;
  --mint-deep: #1f9c7c;
  --gold: #ffc978;
  --gold-deep: #c98a2e;
  --danger: #ff6b5e;
  --violet: #9d8bff;

  --accent: var(--mint);
  --accent-ink: #04120e;

  --font-display: "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 66rem;

  --glow-mint: 0 0 18px rgba(111, 242, 200, 0.35);
  --glow-gold: 0 0 22px rgba(255, 201, 120, 0.3);
  --panel: rgba(9, 20, 32, 0.86);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-3);
}

b,
strong {
  font-weight: 650;
}

a {
  color: var(--mint);
  text-decoration-color: rgba(111, 242, 200, 0.35);
  text-underline-offset: 3px;
}

a:hover {
  color: #a6ffe0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.28rem 0.42rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: rgba(20, 41, 61, 0.7);
  color: var(--ink);
  white-space: nowrap;
}

.tiny {
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: var(--space-2) 0 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}