/*
 * The site's palette. One file, four pages, no second copy.
 *
 * ## Why this exists
 *
 * `landing.css`, `login.css` and `legal.css` each carried the whole palette,
 * copied by hand, "and the copy is written down in `RUN.md`" — which is what
 * this repository says when it has decided to live with a duplication. That
 * decision held until update 81 made the marketing page dark-only and the other
 * two did not follow: a person went from a dark first page to a white sign-in
 * form, on any machine with a light system theme. Nothing failed, because three
 * files agreeing is not a thing a test was watching.
 *
 * The original argument against sharing is still right and this does not
 * contradict it: what must not be shared is a **layout**. `style.css` is ninety
 * kilobytes of panel chrome, `landing.css` is a page — and a sign-in form that
 * pulled either would pay for a features grid and a screenshot strip to get six
 * colours. What is shared here is only the colours, about forty declarations,
 * and every page that draws Flowi's chrome outside the editor links it.
 *
 * ## Why one theme
 *
 * The site is dark; the *editor* is where a theme choice belongs, because that
 * is where somebody works for hours (`docs/NEXT-SESSION.md` §0.2). Somebody
 * reads a landing page for ninety seconds and a sign-in form for twenty, and a
 * site that renders in two themes needs its product screenshots taken in two
 * themes — which nobody was ever going to maintain.
 *
 * `color-scheme: dark` is here rather than in each shell's `<meta>` so that the
 * browser's own furniture — scrollbars, the flash before first paint, the
 * autofill background Chromium paints into an `<input>` — matches on all four
 * pages from one place. The `<meta>` in each shell says the same thing, because
 * it is read before any stylesheet arrives and that first frame is the one this
 * is about.
 *
 * ## The editor is not here
 *
 * `apps/web/style.css` keeps its own light-plus-dark pair. It is the one
 * surface that will get a real switch, and pointing it at a dark-only file
 * would delete the light palette that already works — see §0.2, whose first
 * sentence is that the light theme is already written.
 */

:root {
  color-scheme: dark;

  /* Text, in three weights of presence. */
  --ink: #eef2f8;
  --ink-soft: #9ba7ba;
  --ink-faint: #6a7688;

  /* Surfaces, darkest first. `--paper` is the page; a card sits on it in
     `--paper-raised`; `--paper-tint` is a band of section that is *not* a card
     and must not read as one; `--paper-lift` is the small chip or well inside a
     card, which needs to be lighter than the card it is in. */
  --paper: #080b12;
  --paper-raised: #0f1420;
  --paper-tint: #0c111b;
  --paper-lift: #141a28;

  /* Edges. `--line` is a border somebody should see; `--line-soft` divides two
     regions without drawing attention to the division. */
  --line: #1e2637;
  --line-soft: #161d2b;

  /* The blue. `--accent-ink` is what goes *on* the accent: white on this blue
     is about 2.5:1 and fails at every text size, which is a real contrast bug
     and not a preference. */
  --accent: #4a9dff;
  --accent-deep: #7cbaff;
  --accent-ink: #06182e;
  --accent-wash: rgba(74, 157, 255, 0.12);

  /* Something went wrong. Only the sign-in page uses it, and it lives here
     because the next page that needs one must not invent a second red. */
  --danger: #ff7b74;

  /* The letter inside the mark, which is a hole in a solid shape rather than a
     colour: it has to be the page under it. */
  --mark-ink: #08111f;

  /* The bezel a product screenshot sits in. Only the marketing page draws one,
     and it is here rather than there because a page sheet declares no colours —
     see `browser-safety.test.ts`.

     It exists because the screenshots are dark now. A dark screenshot on a dark
     card is a rectangle with no edges: `--line` against `--paper-raised` is a
     one-pixel difference nobody can see, and a black drop shadow on a black
     page does nothing at all. So the frame is a *light* rim — white at low
     alpha, which sits correctly on any surface underneath rather than being a
     colour that only works on one of them. */
  --frame-face: rgba(255, 255, 255, 0.055);
  --frame-line: rgba(255, 255, 255, 0.1);
  --frame-glow: rgba(74, 157, 255, 0.22);

  --radius: 16px;
  --radius-small: 10px;
  --radius-large: 22px;

  /* How wide a column of this site gets. Only the marketing page has one. */
  --page: 1200px;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}