/* ==========================================================================
   BRAND — the colours of the public pages, from the logo
   ==========================================================================
   The logo (portal/public/brand/, traced from tools/brand/entwurf.webp) is a
   cool charcoal with a slate "Portal". The two public pages — the landing
   page and the school picker — wear it: <body class="brand-theme">.

   It repoints the ROLES of the token block in /styles.css for these pages
   only, the same way an accent ramp does in tokens.css. The canvas stays
   black; everything drawn on it turns a few degrees cooler, and there is no
   brand hue: the primary action is the ink itself, white on black. A school's
   accent is a setting of the dashboard and has no business here — on these
   pages nobody has picked a school yet. `go` follows the ink, so "done" reads
   as a white check, not as green.

   Not in /styles.css on purpose: that file is a checked copy of tokens.css
   (shared/design-tokens.test.mjs), and a second value for --canvas there
   would be a copy that no longer matches.
   ========================================================================== */

.brand-theme {
  /* Brand greys: cool charcoal and slate, from the logo. */
  --ln-c-990: #0a0b0d;
  --ln-c-970: #0d0f12;
  --ln-c-950: #111418;
  --ln-c-900: #171b20;
  --ln-c-850: #1d2228;
  --ln-c-825: #232931;
  --ln-c-875: #1a1f25;
  --ln-c-800: #2a313a;
  --ln-c-700: #3a434e;
  --ln-c-500: #5f6b78;
  --ln-c-400: #808b97;
  --ln-c-300: #aab3bd;
  --ln-c-200: #cfd6dd;
  --ln-c-100: #e8ecf0;
  --ln-slate: #8b95a1;            /* "Portal" in the logo, on black */
  --ln-tint: 225 235 245;          /* light, as rgb channels */

  --grey-990: var(--ln-c-990);
  --grey-970: var(--ln-c-970);
  --grey-950: var(--ln-c-950);
  --grey-900: var(--ln-c-900);
  --grey-850: var(--ln-c-850);
  --grey-825: var(--ln-c-825);
  --grey-800: var(--ln-c-800);
  --grey-700: var(--ln-c-700);
  --grey-500: var(--ln-c-500);
  --grey-400: var(--ln-c-400);
  --grey-300: var(--ln-c-300);
  --grey-200: var(--ln-c-200);
  --grey-100: var(--ln-c-100);

  --canvas: var(--ln-c-990);
  --surface: var(--ln-c-950);
  --surface-head: var(--ln-c-970);
  --surface-raised: var(--ln-c-900);
  --surface-sunken: var(--ln-c-850);
  --surface-hover: rgb(var(--ln-tint) / 0.05);
  --surface-active: rgb(var(--ln-tint) / 0.085);
  --line: var(--ln-c-825);
  --line-soft: var(--ln-c-875);
  --line-control: var(--ln-c-800);
  --line-strong: var(--ln-c-700);
  --ink: var(--ln-c-100);
  --ink-muted: var(--ln-c-300);
  --ink-faint: var(--ln-c-400);
  --idle-quiet: rgb(var(--ln-tint) / 0.06);
  --idle-text: var(--ln-c-300);
  --idle-line: var(--ln-c-700);
  --meter: var(--ln-c-200);

  --accent: var(--ln-c-100);
  --accent-hover: var(--white);
  --accent-active: var(--ln-c-200);
  --accent-ink: var(--ln-c-990);
  --accent-quiet: var(--surface-active);
  --accent-line: var(--line-strong);
  --accent-text: var(--ln-c-100);
  --go: var(--ln-c-200);
  --go-text: var(--ln-c-100);
  --go-quiet: var(--idle-quiet);
  --go-line: var(--line-strong);
  --line-focus: var(--ln-c-300);
}

/* ── One black, edge to edge ─────────────────────────────────────────────
   The tokens above live on <body class="brand-theme">, so <html> kept the
   dashboard's warm #0a0a0a from /styles.css. Wherever the page did not
   reach — below a short page like the Impressum, the overscroll bounce, the
   strip behind a mobile browser's bars — that warmer black showed next to
   the cool one: a visible seam, grey against black. The root now carries
   the same value as --ln-c-990 (a literal: the variables are not defined
   up here). Keep the inline <style> in each page's <head> equal to it.
   Both are painted as a gradient from the colour to itself, never as a flat
   colour: a strip of the page holding only a flat colour reaches the screen
   darker on some Macs and shows as a band (app/styles/base.css explains). */
html:has(> body.brand-theme) { background: #0a0b0d linear-gradient(#0a0b0d, #0a0b0d); color-scheme: dark; }
body.brand-theme { min-height: 100vh; min-height: 100dvh; background: var(--canvas) linear-gradient(var(--canvas), var(--canvas)); }

/* ── Moving between the public pages ─────────────────────────────────────
   Landing page, app page, help and the legal pages are separate documents.
   With cross-document view transitions the browser keeps the header where
   it is and lets the page underneath fade and rise into place, instead of
   a white-free but hard cut. Browsers without it just navigate. */
@view-transition { navigation: auto; }
.brand-theme .ln-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: bt-out 180ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: bt-in 380ms cubic-bezier(0.23, 1, 0.32, 1) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes bt-out { to { opacity: 0; } }
@keyframes bt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}