/* The public site for rainbox.me. Plain HTML and CSS, no scripts, no third-party
   requests, so the site can truthfully say it uses no cookies. Colours, spacing,
   radius and the type scale are the design system's tokens, copied from
   design-system/tokens (tokens.css, tokens.json): change them there first. The
   fonts are the system's headline and body faces, self-hosted (Latin subset,
   SIL Open Font License 1.1) from @fontsource, as the console does. The logo is
   design-system/tokens/brand/logo-mark.svg. */

@font-face { font-family: Sansation; font-weight: 400; font-display: swap; src: url(/fonts/sansation-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Sansation; font-weight: 700; font-display: swap; src: url(/fonts/sansation-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Oxygen; font-weight: 400; font-display: swap; src: url(/fonts/oxygen-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Oxygen; font-weight: 700; font-display: swap; src: url(/fonts/oxygen-latin-700-normal.woff2) format("woff2"); }

:root {
  --color-surface: 246 249 255;
  --color-surface-raised: 255 255 255;
  --color-content: 23 37 84;
  --color-content-muted: 63 90 160;
  --color-border-subtle: 191 219 254;
  --color-primary: 37 99 235;
  --color-primary-pressed: 29 78 216;
  --color-on-primary: 255 255 255;
  --color-accent: 29 78 216;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: 10 15 31;
    --color-surface-raised: 17 26 51;
    --color-content: 219 234 254;
    --color-content-muted: 157 183 232;
    --color-border-subtle: 30 58 138;
    --color-primary: 96 165 250;
    --color-primary-pressed: 147 197 253;
    --color-on-primary: 0 0 0;
    --color-accent: 147 197 253;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: rgb(var(--color-surface));
  color: rgb(var(--color-content));
  font: 16px/24px Oxygen, system-ui, sans-serif;
}

a { color: rgb(var(--color-accent)); }
a:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 44rem; margin-inline: auto; padding-inline: 1rem; }

header { border-bottom: 1px solid rgb(var(--color-border-subtle)); }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; color: rgb(var(--color-primary)); font: 700 1.5rem/1 Sansation, system-ui, sans-serif; text-decoration: none; }
.wordmark img { display: block; width: 2.5rem; height: 2.5rem; margin-inline: -0.4rem 0; }
nav { display: flex; gap: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }
nav a { color: rgb(var(--color-content-muted)); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: rgb(var(--color-content)); text-decoration: underline; }

main { padding-block: 3rem 4rem; }
h1, h2 { font-family: Sansation, system-ui, sans-serif; }
h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin: 2.5rem 0 0.5rem; text-wrap: balance; }
p, ul { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }
.lede { font-size: 1.125rem; line-height: 1.75rem; color: rgb(var(--color-content-muted)); max-width: 38rem; }
.meta { color: rgb(var(--color-content-muted)); font-size: 0.875rem; }

.cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2.5rem; }
.panel { background: rgb(var(--color-surface-raised)); border: 1px solid rgb(var(--color-border-subtle)); border-radius: 8px; padding: 1.5rem; }
.panel h2 { margin-top: 0; }
.panel ul { margin-bottom: 0; }

footer { border-top: 1px solid rgb(var(--color-border-subtle)); color: rgb(var(--color-content-muted)); font-size: 0.875rem; }
footer .wrap { padding-block: 1.5rem; }
footer p { margin-bottom: 0.25rem; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Home page hero: the mark large, over the headline. */
.hero { display: grid; gap: 1.5rem; justify-items: start; }
.hero img { width: 5rem; height: 5rem; }
@media (min-width: 40rem) { .hero { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; } .hero img { width: 7rem; height: 7rem; } }
.hero h1 { margin-bottom: 0; }