/* magnoon.nl — shared design tokens (homepage + prism-crafting app).
   Dark-only by design: the site ships a single palette and forces
   color-scheme: dark so form controls and scrollbars match regardless of the
   OS preference. There is no light variant and no theme switching.
   404.html deliberately keeps its own inline copy of the subset it uses: an
   error page must not depend on other assets. That copy is still edited by hand,
   but tests/prism-interface.test.mjs fails if any value there drifts from here.
   The self-contained loot-filter workbench also inlines this palette, but injects
   it verbatim from here at assemble time (apps/loot-filter/assemble.mjs), so that copy
   cannot drift — edit the values here and regenerate the page.
   App-specific tokens (affix category colours) stay in prism-crafting/app.css. */
/* The accent is a cool blue, matching the slight blue bias already in the
   neutrals, and the ground sits below the panels rather than beside them: the
   old --ground and --panel were four points apart, so a card and the page it
   sat on read as one plane. An earlier amber accent was tried and reverted —
   it fought the blue-biased neutrals and read as an unwanted Diablo-brown tint.
   The logo keeps its own blue; it is artwork, not a token. */
:root {
  color-scheme: dark;
  --ground: #0a0f16;
  --panel: #151b26;
  --panel2: #1b2230;
  --edge: #3b4354;
  --edge-soft: #2e3644;
  --ink: #dce7f3;
  --muted: #93a5bd;
  --faint: #697c94;
  --accent: #4f8fc9;
  --accent-ink: #79b4e2;
  --hit: #15202a;
  /* The fill behind a chip — one affix on a prism card, one outcome on a
     Transfiguration card. Shared rather than app-local since the second page
     started drawing the same object. */
  --chip-bg: #131820;
  /* Something is wrong and the visitor needs to see it. Added when the shared
     boot-failure notice moved to apps/shared/base.css: the three copies it
     replaced each carried their own near-identical red (#d17374, #a96969, and
     prism-crafting's --cor), which is the drift this palette exists to prevent. */
  --danger: #d17374;
  /* The one page measure every app's content column is capped at, so the four
     tools read as one application rather than four independently sized pages.
     Prism Crafting is the default this was lifted from (tests/prism-interface.test.mjs
     pins its .wrap to the literal `max-width:1680px` so that copy stays a plain
     number, not this variable — keep the two equal by hand if either changes). */
  --page-width: 1680px;

  /* ---- type scale ----
     One ladder for all four pages. Before this there were about forty distinct
     font-size values across the app stylesheets: two apps sized in `rem` and two
     in `px`, and the px pair had drifted onto half-pixel steps (9.5, 10.5, 12.5,
     13.5, 14.5) that nothing chose. The result was that the same *kind* of text —
     a row label, a chip, a hint — was a slightly different size on each page,
     which is the sort of difference a visitor reads as "another site" without
     ever being able to name it.

     Declared in `rem`, deliberately, and that is what makes one ladder possible
     at all: `rem` resolves against the root, not the body, so a step is the same
     number of pixels on the 14px/1.35 loot-filter workbench as on the 16px/1.5
     pages. An `em` value in an app stylesheet is a different statement — "size
     this against its parent" — and stays; the `.alpha-tag` beside an <h1> is the
     example, and it must not become a fixed step.

     --fs-hero is the shared page title (chrome.css .pagehead h1). It is here
     rather than there because 404.html and the homepage state it too. */
  --fs-3xs: 0.625rem; /* 10px */
  --fs-2xs: 0.6875rem; /* 11px */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.8125rem; /* 13px */
  --fs-base: 0.875rem; /* 14px */
  --fs-md: 0.9375rem; /* 15px */
  --fs-lg: 1rem; /* 16px */
  --fs-xl: 1.0625rem; /* 17px */
  --fs-2xl: 1.125rem; /* 18px */
  --fs-3xl: 1.25rem; /* 20px */
  --fs-4xl: 1.5rem; /* 24px — a named entry in a list, below a page title */
  --fs-display: 2.125rem; /* 34px — the calculator's one oversized total */
  --fs-hero: clamp(1.6875rem, 4vw, 2.3125rem);

  /* ---- corner radius ----
     Eight values were in circulation (2, 3, 4, 5, 6, 7, 8px and one 0.5rem) for
     four kinds of object, so a card on one page and the same card on the next
     were rounded differently. Three steps and a pill cover every use:
     --radius-sm for controls and chips, --radius-md for panels and cards,
     --radius-lg for dialogs and the largest surfaces. */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- semantic status colours ----
     --danger above is the "something is wrong" red of the two failure notices.
     These two are the other end: a value the page is telling you is good or bad.
     They were app-local (`--good`/`--bad` in the calculator's own :root) while
     the identical red was also hand-written into three places as the Alpha
     pill's background — site/index.html, chrome.css and the calculator — so the
     same meaning shipped under three definitions. */
  --good: #7fd18a;
  --bad: #ef4444;
  --on-bad: #1a0505;
}