/* Portal design tokens. Palette values come from PortalTheme via
   MudThemeProvider's emitted --mud-palette-* variables — do not hardcode colors here. */
:root {
  --portal-color-primary: var(--mud-palette-primary);
  --portal-color-surface: var(--mud-palette-surface);
  --portal-color-text: var(--mud-palette-text-primary);
  --portal-color-border: var(--mud-palette-lines-default);

  /* Text ramp. Everything used to render at one value, so a page title, a section
     heading and a paragraph were the same colour and the hierarchy came only from size.
     Three steps of luminance in the same blue-grey family, rather than hue: a coloured
     heading competes with links, which already own the primary blue.

     --portal-color-text stays the general UI value and is what Scalar's --scalar-color-1
     maps to; the ramp below is for reading surfaces, so dimming body text here does not
     dim the reference's own headings. Contrast on --mud-palette-background: heading
     14.2:1, body 11.9:1, muted 5.9:1 — AAA, AAA, AA. */
  --portal-color-heading: #F0F6FC;
  --portal-color-body: #C9D1D9;
  --portal-color-muted: #8B949E;
  --portal-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --portal-font-code: "Cascadia Code", Consolas, monospace;
  --portal-radius: 6px;

  /* Width of the centred page shell. The app bar's contents and the page body both
     honour it, so the wordmark stays aligned with the content below it.

     Sized for the API reference, the page with the most use for width: Scalar's sidebar
     plus one section at its cap (1600px rather than Scalar's 1540px) and that section's
     padding, about 2000px. Every page shares it, so nothing moves between pages. */
  --scalar-content-max-width: 1600px;
  --portal-scalar-section-gutter: 32px;
  --portal-content-gutter: 24px;
  --portal-content-width: calc(var(--scalar-sidebar-width, 288px) + var(--scalar-content-max-width)
    + 2 * var(--portal-scalar-section-gutter) + 2 * var(--portal-content-gutter));

  /* Reading measure for prose and code, the same 72rem tables get. It was 54rem, about 120
     characters at 1rem, but in the wide shell that left a gap beside the "On this page"
     outline wider than the outline itself; 72rem trades longer lines for closing it. */
  --portal-prose-width: 72rem;

  /* Syntax colours for highlighted code. A vendored highlight.js theme would be a second
     palette to keep in step with this one, so the six groups that carry the meaning get
     tokens here instead and highlight.css maps the library's classes onto them. Hues are
     chosen against --mud-palette-background-gray, the code-fence surface. */
  --portal-code-keyword: #FF7B72;
  --portal-code-string: #A5D6FF;
  --portal-code-number: #79C0FF;
  --portal-code-comment: #8B949E;
  --portal-code-name: #D2A8FF;
  --portal-code-meta: #7EE787;

  /* Scalar reference themed from the same tokens. theme:'none' in the
     embed leaves these --scalar-* variables as the styling contract. Typography and
     geometry belong here: Scalar declares them in its own :root, which this earlier
     :root wins. Its colours do not — see the body.dark-mode block below. */
  --scalar-font: var(--portal-font);
  --scalar-font-code: var(--portal-font-code);
  --scalar-border-radius: var(--portal-radius);
}

/* Scalar keeps its colour palette in a plain `.dark-mode` rule matching <body> (its
   light/dark split is class-driven). That ties with `:root` on specificity and is
   injected into <head> at runtime, so it wins on source order and the reference renders
   in Scalar's own near-black and cyan beside the portal's blue-greys. `body.dark-mode`
   outranks it and lets the portal palette through. Scalar derives every
   --scalar-sidebar-* variable from these, so the sidebar and its search follow along.
   Its neutral muted-text ramp (--scalar-color-2/-3) is deliberately left alone: those
   greys read correctly on these surfaces, and the portal has no token at that step.

   Scalar also offers a `customCss` config option for this, but that takes a CSS string
   in JS — it would either hardcode colours away from the token layer or restate these
   same var() references. Keeping them here leaves tokens.css the single styling
   contract. */
body.dark-mode {
  --scalar-background-1: var(--mud-palette-background);
  --scalar-background-2: var(--mud-palette-surface);
  --scalar-background-3: var(--mud-palette-background-gray);
  --scalar-background-accent: var(--mud-palette-primary-hover);
  --scalar-color-1: var(--portal-color-text);
  --scalar-color-accent: var(--portal-color-primary);
  --scalar-border-color: var(--portal-color-border);
}