/* LINAI base: page, background and element defaults.
   Every colour, size and font comes from tokens.css. */

/* The theme is dark only. Saying so keeps phone browsers' dark modes (HeyTap, Samsung Internet,
   WebView apps) from recolouring the page, and gives form controls and scrollbars their dark look */
:root{color-scheme:dark}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink)}

/* The page: a fixed dot grid with two soft navy-grey glows. Only the content scrolls. */
.r-page{
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-color:var(--deep-bg);
  background-image:
    radial-gradient(color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1.2px),
    radial-gradient(900px 600px at 80% 10%,color-mix(in srgb,var(--navy) 90%,transparent),transparent 70%),
    radial-gradient(700px 500px at 0% 60%,color-mix(in srgb,var(--navy) 70%,transparent),transparent 70%);
  background-size:24px 24px,auto,auto;
  background-attachment:fixed;
  overflow:clip;
}

:where(.r-page) a{color:inherit;text-decoration:none}

/* Plain text links get a visible keyboard focus; buttons and fields style their own */
.r-page a:not(.r-btn):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}

::selection{background:var(--accent);color:var(--on-accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}