/**
 * @file
 * MLT Modern — Non-colour design tokens.
 *
 * Typography stack, spacing scale, radii, shadows. Kept separate from the
 * scheme-bridge so colour and form can be tuned independently.
 *
 * Per-site font choices set via Appearance → MLT Modern → Settings will
 * regenerate css/overrides.css with new values for --mlt-font-body and
 * --mlt-font-heading. The rules at the bottom of this file apply those
 * variables to actual elements, so any change in overrides.css flows
 * through to the rendered page.
 */

:root {
  /* Default type stack — system fonts. Used unless overrides.css sets
   * something else. */
  --mlt-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mlt-font-heading: var(--mlt-font-body);

  /* Spacing scale (rough, not a strict 4/8 system - mirrors rewires.html). */
  --mlt-space-xs: 6px;
  --mlt-space-sm: 10px;
  --mlt-space-md: 16px;
  --mlt-space-lg: 24px;
  --mlt-space-xl: 32px;
  --mlt-space-2xl: 50px;
  --mlt-space-3xl: 70px;

  /* Border radii. */
  --mlt-radius-sm: 4px;
  --mlt-radius-md: 6px;
  --mlt-radius-lg: 10px;
  --mlt-radius-pill: 30px;

  /* Shadows. */
  --mlt-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --mlt-shadow-elevated: 0 12px 24px rgba(0, 0, 0, 0.08);
  --mlt-shadow-hero-form: 0 20px 50px rgba(0, 0, 0, 0.25);

  /* Layout. */
  --mlt-container-max: 1200px;
  --mlt-container-pad: 20px;
}

/* -----------------------------------------------------------------------
 * Apply the font variables to actual elements.
 *
 * Bootstrap 5 sets `font-family: var(--bs-body-font-family)` on the body
 * element via reboot.scss, which would otherwise win the cascade over
 * a plain `body { font-family: ... }` rule from us. To beat it, we
 * either need our rule to load AFTER Bootstrap (which it does — info.yml
 * loads bootstrap first, then mlt-modern-components), and also need to
 * use a selector with equal-or-higher specificity than `body` (which
 * `body.mlt-modern` provides — the .mlt-modern class is added by our
 * mlt_modern_preprocess_html hook).
 * ----------------------------------------------------------------------- */

body.mlt-modern {
  font-family: var(--mlt-font-body);
}

body.mlt-modern h1,
body.mlt-modern h2,
body.mlt-modern h3,
body.mlt-modern h4,
body.mlt-modern h5,
body.mlt-modern h6 {
  font-family: var(--mlt-font-heading);
}