/* Nautis — shared base layer
   Loaded UNCONDITIONALLY (no media query) on every page via Layout.astro.

   This is the foundational layer every page needs regardless of viewport width
   or which layout stylesheet (desktop.css / mobile.css) happens to be active:
   the brand design tokens, the html/body typographic base, the box-sizing reset,
   the image + link resets.

   Why this exists: the homepage loads desktop.css behind `media="(min-width:769px)"`
   and mobile.css behind `media="(max-width:768px)"` (a deliberate desktop/mobile
   design split). The other pages load desktop.css unconditionally. With
   <ClientRouter /> (View Transitions), navigating from the homepage at mobile
   width to another page kept the homepage's media-restricted /desktop.css link,
   so below 769px the base layer (tokens, font-family, link reset) stopped
   applying — the body fell back to serif with underlined links until a reload.
   Pulling that base layer here, loaded with no media query everywhere, means the
   tokens / font / reset always apply regardless of width or SPA navigation.

   IMPORTANT: only genuinely-shared, identical-in-both-sheets rules live here.
   Anything that is part of the desktop-vs-mobile split (the responsive
   font-size, --gutter, --container, html scroll niceties that differ) stays in
   desktop.css / mobile.css so the homepage's responsive design is untouched.
*/

:root {
  --nautis-bg: #F8FCFF;
  --nautis-surface: #FFFFFF;
  --nautis-surface-highlight: #E3F2FD;
  --nautis-border-subtle: #E3F2FD;

  --nautis-navy: #0A3D62;
  --nautis-navy-deep: #072A44;
  --nautis-blue: #3B82F6;

  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--nautis-bg);
  color: var(--slate-800);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: var(--nautis-blue);
  text-decoration: none;
}