/* Shared composition tokens. The original Motus identity and deck runtime stay intact. */
.motus-website,
.md-overview {
  --motus-surface-soft: color-mix(in srgb, var(--color-surface) 50%, var(--color-paper));
  --motus-rule: color-mix(in srgb, var(--color-text) 16%, var(--color-paper));
  --motus-rule-blue: color-mix(in srgb, var(--color-accent-deep) 25%, var(--color-accent-tint));
  --motus-text-on-blue: color-mix(in srgb, var(--color-paper) 25%, var(--color-accent-tint));
  --motus-text-on-tint: var(--color-accent-deep);
  --motus-leading-body: 1.6;
  --motus-leading-title: 1.12;
  --motus-leading-label: 1.5;
  --motus-weight-title: 500;
  --motus-figure-gap: var(--space-16);
  --motus-caption-gap: var(--space-6);
  --motus-component-pad: var(--space-8);
  --motus-component-gap: var(--space-12);
  --motus-type-caption: 13px;
  --motus-type-small: 15px;
  --motus-type-body: 17px;
  --motus-type-lead: 20px;
  --motus-type-node: 30px;
  --motus-type-section: clamp(38px, 4.5vw, 64px);
  --mdg-title: 30px;
  --mdg-body: 20px;
  --mdg-label: 16px;
  --mdg-cue: 15px;
  --mdg-overline: 14px;
  --mdg-record: 24px;
  --mdg-brand: 43px;
  --mdg-company: 28px;
  --mdg-line: 1.5;
}

/* The three diagrams share type roles, fills, line weights and caption treatments.
   Coordinates describe relationships; they are intentionally authored per diagram. */
.motus-diagram text {
  font-family: var(--font-body);
  font-size: var(--mdg-body);
  font-weight: 400;
  fill: var(--color-text-muted);
}
.motus-diagram .mdg-title {
  font-family: var(--font-display);
  font-size: var(--mdg-title);
  font-weight: var(--motus-weight-title);
  fill: var(--color-text);
}
.motus-diagram .mdg-label {font-size:var(--mdg-label);fill:var(--color-accent-deep)}
.motus-diagram .mdg-cue {font-size:var(--mdg-cue);font-style:italic}
.motus-diagram .mdg-overline {font-size:var(--mdg-overline);letter-spacing:.08em}
.motus-diagram .mdg-record {font-size:var(--mdg-record)}
.motus-diagram .mdg-brand {font-family:var(--font-display);font-size:var(--mdg-brand);font-weight:var(--motus-weight-title)}
.motus-diagram .mdg-accent {fill:var(--color-accent-deep)}
.motus-diagram .mdg-inverse {fill:var(--color-paper)}
.motus-diagram .mdg-muted {fill:var(--color-text-muted)}
.motus-diagram .mdg-surface {fill:var(--color-surface)}
.motus-diagram .mdg-paper {fill:var(--color-paper)}
.motus-diagram .mdg-tint {fill:var(--color-accent-tint)}
.motus-diagram .mdg-card {fill:var(--color-paper);stroke:var(--motus-rule);stroke-width:1}
.motus-diagram .mdg-card-accent {stroke:var(--color-accent-deep);stroke-width:var(--mdg-line)}
.motus-diagram .mdg-line {fill:none;stroke:var(--color-accent-deep);stroke-width:var(--mdg-line)}
.motus-diagram .mdg-line-muted {stroke:var(--color-text-muted)}
.motus-diagram .mdg-optional {stroke-dasharray:4 5}
.motus-diagram .mdg-boundary {stroke-dasharray:3 6}
.motus-diagram .mdg-divider {stroke:var(--motus-rule-blue);stroke-width:1}

.md-overview {--mdg-label:18px;--mdg-cue:18px;--mdg-overline:18px}
.md-story-exchange {--mdg-label:20px;--mdg-cue:20px;--mdg-overline:20px}

@media (max-width:560px) {
  .motus-website {
    --motus-figure-gap:var(--space-8);
    --motus-component-pad:var(--space-6);
    --motus-type-node:28px;
    --motus-type-section:38px;
  }
}
.motus-diagram .mdg-company {font-size:var(--mdg-company)}