/*
  The bridge between the site stylesheet and the firm's Sanad theme (JTHR-SANAD-046), loaded after site-theme.css.

  site-theme.css is compiled, and reads its own variables: surfaces, text, borders, the action, radii, the brand font,
  the type scale and motion. Its corners, type sizes and weights are written as shares of these variables (see
  docs/website-theme.md, "The compiled stylesheet's corners and type"). Each page carries the Sanad theme its site's
  settings choose, as the vocabulary's custom properties (--color-*, --shape-*, --type-*, --motion-*, …) under
  :root[data-sanad-theme="<theme>"], with the dark mode's under [data-appearance="dark"]. This block maps the
  stylesheet's variables onto them, in one place, so choosing another theme changes the page without a change to the
  stylesheet, the renderer or a build. It names no theme and holds no value of its own: it applies only where a theme
  is drawn, and otherwise leaves the stylesheet as it is.

  The stylesheet's dark mode sets its variables under :root[data-theme="dark"]; this selector is as specific and comes
  later, so the theme's dark values take their place, following data-appearance, which the site's script keeps equal
  to data-theme. The variables the stylesheet derives from these (--border-strong, --text-muted, the navigation's
  glass, …) follow them. A section the stylesheet draws on its own surface sets its variables on that section, and
  keeps them.

  The palette (--brand-ink, -mist, -paper, -white, -night, -surface-dark and the status colours), which the stylesheet
  uses in both modes, is not mapped here: a page's style block sets it from the same theme's colour roles in one mode
  each (src/site/theme/palette.mjs).
*/
:root[data-sanad-theme], :root[data-sanad-theme] [data-shared-frame] {
  /* Surfaces and text. */
  --canvas: var(--color-surface);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-raised);
  --text: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --border: var(--color-border);
  /* The action and the focus ring. */
  --action: var(--color-action);
  --on-action: var(--color-on-action);
  --focus: var(--color-focus);
  /* Corners: cards and panels, controls, fields, what floats over the page, pills and small status marks. */
  --radius-surface: var(--shape-card);
  --radius-control: var(--shape-control);
  --radius-float: var(--shape-floating);
  --radius-input: var(--shape-input);
  --radius-chip: var(--shape-chip);
  --radius-status: var(--shape-status);
  /* Type: the body's family, which carries the firm's brand font when it has one, and the scale's sizes and weights. */
  --font-brand: var(--type-body-font-family);
  --font-size-display: var(--type-display-font-size);
  --font-size-heading-1: var(--type-heading-1-font-size);
  --font-size-heading-2: var(--type-heading-2-font-size);
  --font-size-heading-3: var(--type-heading-3-font-size);
  --font-size-heading-4: var(--type-heading-4-font-size);
  --font-size-body: var(--type-body-font-size);
  --font-size-label: var(--type-label-font-size);
  --font-size-caption: var(--type-caption-font-size);
  --font-weight-display: var(--type-display-font-weight);
  --font-weight-heading-1: var(--type-heading-1-font-weight);
  --font-weight-heading-2: var(--type-heading-2-font-weight);
  --font-weight-heading-3: var(--type-heading-3-font-weight);
  --font-weight-heading-4: var(--type-heading-4-font-weight);
  --font-weight-body: var(--type-body-font-weight);
  --font-weight-label: var(--type-label-font-weight);
  --font-weight-caption: var(--type-caption-font-weight);
  /* Motion. */
  --motion-duration: var(--motion-duration-medium);
  --motion-ease: var(--motion-easing-standard);
}