globals.css

@import "tailwindcss";
@import "./styles/tokens.css";
@import "./styles/water.css";
@import "./styles/sea-life.css";
@import "./styles/otto.css";
@import "./styles/motion.css";
@import "./styles/shell.css";
@import "./styles/dialog.css";
@import "./styles/scroll.css";
@import "./styles/loaders.css";
@import "./styles/portfolio.css";
@import "./styles/review.css";

/* Divergences from the design project live here, never in the ported files, so
   re-syncing tokens.css cannot silently drop them.

   The generated tokens.css defines --ot-water-*, --ot-caustic and --ot-bubble
   under [data-theme="dark"] but not under prefers-color-scheme. A visitor on
   system dark who has never picked a theme — the default for most people —
   would get light-mode water washes over a dark navy page. Fix upstream when
   the generator is touched; until then this closes it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ot-water-1: #111B30;
    --ot-water-2: #141F39;
    --ot-water-3: #182643;
    --ot-caustic: rgba(91, 155, 255, 0.07);
    --ot-bubble: rgba(158, 194, 255, 0.28);
  }
}

/* Otto's underside shade. Not in the generated tokens — the mascot needs a
   colour a step darker than the body, and it has to move with the body in dark
   mode or the shading inverts. */
:root { --ot-coral-shade: #E06A47; }
[data-theme="dark"] { --ot-coral-shade: #E0714F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ot-coral-shade: #E0714F; }
}

/* next/font supplies the actual families; the token names stay the contract. */
:root {
  --ot-font-display: var(--font-quicksand), ui-rounded, system-ui, sans-serif;
  --ot-font-ui: var(--font-figtree), system-ui, sans-serif;
  --ot-font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
}

/* Fonts do need a @theme mapping, unlike the colours below.
   Tailwind cannot infer the data type of font-[var(--x)] — font-* is ambiguous
   between family and weight — so it silently emits nothing. Mapping them here
   gives real font-display / font-ui / font-mono utilities. */
@theme inline {
  --font-display: var(--ot-font-display);
  --font-ui: var(--ot-font-ui);
  --font-mono: var(--ot-font-mono);
}

/* No @theme colour mapping on purpose.
   Components reference var(--ot-*) directly — the token name is the contract,
   and it is the same string in CSS, in the design project and in a review
   comment. A parallel Tailwind vocabulary (bg-coral alongside
   bg-[var(--ot-coral)]) would be a second name for every colour, free to drift
   from the first. Add utilities here only when something actually needs them. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ot-page);
  color: var(--ot-text);
  font-family: var(--ot-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Visible focus is a security affordance here: people tab through a review page
   before signing, and an invisible focus ring means signing the wrong button. */
:focus-visible {
  outline: 2px solid var(--ot-plan);
  outline-offset: 2px;
  border-radius: var(--ot-radius-sm);
}

/* Visually hidden but still focusable and announced — the theme control's real
   radio inputs sit behind their labels. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}