/*
 * cms-tokens.css - the Cms design-token vocabulary and its defaults.
 * Cms_Design_Token_Migration_Plan.md Phase 0; Cms_Design_Tool_Plan.md D0.
 *
 * Registered on every storefront page by CmsTokens::register() (PageApi::setPageHead), ahead of
 * any widget CSS. This site's brand - the CMS_DESIGN_TOKENS setting - follows it, then
 * everything the page's templates and widgets say themselves.
 *
 * WHY :where(:root). :where() has no specificity, so these defaults - and the site override,
 * which uses the same selector - lose to ANY template, page or widget that declares a token on
 * :root, wherever in the document that declaration sits. A template that defines its own tokens
 * (the 2027 wrapper, template 161) keeps them exactly. Order of precedence:
 *     this sheet  <  the site override  <  anything a template or widget declares
 *
 * PHASE 0 CHANGES NOTHING ON SCREEN, and every value below is chosen to keep it so:
 *   - A token a widget already reads (NavigationMenu, ContactUs) defaults to exactly that
 *     widget's fallback, so the widget renders as it does today.
 *   - Where two readers disagree, the token has NO default and each reader keeps its own
 *     fallback: --cms-primary (#005ea8 in NavigationMenu, #17324d in ContactUs) and
 *     --cms-text (#18202c and #202938, both in NavigationMenu). --cms-accent has none either:
 *     a site's second colour is a brand decision, not a default.
 *   - Shades of those three are DERIVED from them with color-mix(). While the base has no
 *     value the shade is invalid, so its readers fall back too; once a site sets its primary,
 *     the hover, soft and ink shades follow it instead of staying the old navy. The text shades
 *     keep AA on the page background for ordinary dark text: small print is 66% text, which is
 *     4.8:1 for #1f2933 on white (60% was 4.0:1 - found by the brand editor's contrast check).
 *   - Everything no widget reads yet takes Bootstrap 5.3's value, so bridging Bootstrap onto
 *     these tokens (Phase 1) is a no-op for it. Shadows default to none: the platform does not
 *     use drop shadows.
 * verify-cms-tokens.php checks these rules against every reader in the code and in this site's
 * content, so a new widget with a different fallback fails the suite rather than the storefront.
 *
 * The vocabulary is every name declared below plus the three with no default - 42 in all -
 * and CmsTokens::VOCABULARY lists exactly those. A site override may set any of them and
 * nothing else.
 */
:where(:root) {
  /* Surfaces */
  --cms-surface: #ffffff;
  --cms-surface-2: #f8f9fa;
  --cms-card: #ffffff;
  --cms-deep: #212529;
  --cms-deep-text: #f8f9fa;
  --cms-deep-soft: #adb5bd;

  /* Ink. --cms-text: no default (see above). */
  --cms-text-soft: color-mix(in srgb, var(--cms-text) 78%, var(--cms-surface));
  --cms-muted: color-mix(in srgb, var(--cms-text) 66%, var(--cms-surface));
  --cms-line: #dfe5ec;

  /* Brand. --cms-primary and --cms-accent: no default (see above). */
  --cms-primary-ink: color-mix(in srgb, var(--cms-primary) 85%, #000000);
  --cms-primary-hover: color-mix(in srgb, var(--cms-primary) 82%, #000000);
  --cms-primary-soft: color-mix(in srgb, var(--cms-primary) 12%, var(--cms-surface));
  --cms-primary-contrast: #ffffff;
  --cms-accent-soft: color-mix(in srgb, var(--cms-accent) 12%, var(--cms-surface));
  --cms-focus: color-mix(in srgb, var(--cms-primary) 70%, #ffffff);

  /* Semantic */
  --cms-success: #198754;
  --cms-warning: #ffc107;
  --cms-danger: #dc3545;
  --cms-info: #0dcaf0;

  /* Type */
  --cms-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --cms-font-display: var(--cms-font-body);
  --cms-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cms-font-size: 1rem;
  --cms-font-size-sm: 0.875rem;
  --cms-font-size-lg: 1.25rem;
  --cms-line-height: 1.5;

  /* Space and size */
  --cms-space-1: 0.25rem;
  --cms-space-2: 0.5rem;
  --cms-space-3: 1rem;
  --cms-space-4: 1.5rem;
  --cms-space-5: 3rem;
  --cms-gap: 1rem;
  --cms-section: 3rem;
  --cms-wrap: 1140px;

  /* Shape */
  --cms-radius-sm: 6px;
  --cms-radius: 8px;
  --cms-radius-lg: 16px;
  --cms-shadow: none;
  --cms-shadow-pop: none;
}