contain-css-svelte 1.2.3 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/Card.svelte +216 -288
  2. package/dist/controls/Button.svelte +39 -1
  3. package/dist/controls/ButtonLink.svelte +39 -1
  4. package/dist/controls/Checkbox.svelte +38 -0
  5. package/dist/controls/CircleButton.svelte +39 -1
  6. package/dist/controls/Input.svelte +39 -1
  7. package/dist/controls/RadioButton.svelte +38 -0
  8. package/dist/controls/Select.svelte +38 -0
  9. package/dist/controls/Slider.svelte +39 -1
  10. package/dist/controls/TabItem.svelte +39 -1
  11. package/dist/controls/Toggle.svelte +39 -1
  12. package/dist/dropdowns/DropdownMenu.svelte +39 -1
  13. package/dist/index.d.ts +2 -1
  14. package/dist/index.js +2 -1
  15. package/dist/layout/Accordion.svelte +39 -1
  16. package/dist/layout/Bar.svelte +49 -1
  17. package/dist/layout/ColumnContainer.svelte +39 -1
  18. package/dist/layout/Columns.svelte +39 -1
  19. package/dist/layout/Container.svelte +217 -292
  20. package/dist/layout/DataList.svelte +39 -1
  21. package/dist/layout/DataListItem.svelte +217 -292
  22. package/dist/layout/Fieldset.svelte +39 -1
  23. package/dist/layout/Form.svelte +217 -292
  24. package/dist/layout/FormItem.svelte +39 -1
  25. package/dist/layout/GridLayout.svelte +38 -0
  26. package/dist/layout/Hero.svelte +217 -292
  27. package/dist/layout/Inline.svelte +45 -1
  28. package/dist/layout/MenuList.svelte +39 -1
  29. package/dist/layout/Page.svelte +44 -2
  30. package/dist/layout/RowContainer.svelte +39 -1
  31. package/dist/layout/Sidebar.svelte +757 -65
  32. package/dist/layout/Sidebar.svelte.d.ts +58 -1
  33. package/dist/layout/SidebarContainer.svelte +198 -0
  34. package/dist/layout/SidebarContainer.svelte.d.ts +20 -0
  35. package/dist/layout/SplitPane.svelte +39 -1
  36. package/dist/layout/Stack.svelte +45 -1
  37. package/dist/layout/TabBar.svelte +39 -1
  38. package/dist/layout/Table.svelte +469 -443
  39. package/dist/layout/Tile.svelte +216 -291
  40. package/dist/misc/CodeInner.svelte +39 -1
  41. package/dist/misc/Progress.svelte +217 -292
  42. package/dist/misc/Tag.svelte +39 -1
  43. package/dist/overlays/Dialog.svelte +217 -292
  44. package/dist/overlays/Tooltip.svelte +267 -349
  45. package/dist/sass/_responsive.scss +15 -0
  46. package/dist/sass/_typography.scss +203 -191
  47. package/dist/typography/TextLayout.svelte +494 -292
  48. package/dist/vars/defaults.css +258 -0
  49. package/dist/vars/typography-context.css +271 -0
  50. package/package.json +1 -1
package/dist/typography/TextLayout.svelte CHANGED
@@ -7,7 +7,33 @@ const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marg
7
7
  {@render children?.()}
8
8
  </div>
9
9
 
10
- <style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
10
+ <style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
11
+ inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
12
+ assigned directly to a matched h1-h6 selector. Nothing in this file matches
13
+ an actual heading element anymore -- see typography-context.css (vars/), which
14
+ is the single, global, :where()-scoped rule that actually reads these vars
15
+ and applies them to real elements. That split is what lets a component
16
+ nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
17
+ nearest ancestor's heading styling: these are ordinary inherited custom
18
+ properties, so DOM proximity decides which component's values apply, not
19
+ selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
20
+ /* All six heading levels' context vars in one call -- what every
21
+ "typography container" component (Container, Card, Tile, TextLayout, ...)
22
+ includes on itself once, alongside the shared --_heading-* vars below. */
23
+ /* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
24
+ their own vars -- they're never wider than their ul/ol/dl parent's own
25
+ max-width box, so they're already bounded for free by ordinary block
26
+ layout, not by anything selector-based reaching them individually. */
27
+ /* p specifically also gets the fuller typography-props-bare treatment
28
+ (paragraph-prefixed), which -- same as in the original selector-based
29
+ version -- is declared/consumed AFTER the shared prose vars above, so it
30
+ wins for whichever properties both groups set. */
31
+ /* The first paragraph in a typography context (p:first-of-type, or a p right
32
+ after a heading) gets its own, slightly different treatment -- larger lede
33
+ text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
34
+ has to happen where the real element is, in the global consumer rule; only
35
+ the VALUES move to context vars here. */
36
+ /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
11
37
  one value (both sides equal) or two (start end), so there is no separate
12
38
  "which side" prop to remember and no 4-value shorthand order to get wrong.
13
39
  Defaults to 0 on purpose -- unlike padding-props above, a margin that
@@ -15,6 +41,18 @@ const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marg
15
41
  day this mixin got added to a new component. Callers opt in with an actual
16
42
  value. (Container does not use this mixin: it wants --gap/auto as its
17
43
  defaults, which do not fit the "0 unless asked" contract here.) */
44
+ /* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
45
+ affordance -- a floating button that opens a panel over the content.
46
+
47
+ Page has to agree with Sidebar about this, because Page is what floats the
48
+ aside out of flow and reserves the strip of padding the sheet button sits
49
+ in. They used to disagree: Sidebar switched at 512px and Page at 600px,
50
+ which left a band between 513 and 600 where Page had already lifted the
51
+ aside out of the layout while the Sidebar inside it was still showing a
52
+ rail -- a grab bar floating on top of the content, which is the affordance
53
+ we deliberately avoid everywhere else.
54
+
55
+ One definition, used by both, so they cannot drift again. */
18
56
  /* Warning: because we define a fallback
19
57
  media query, the media query can override the container
20
58
  if we stack a bunch of these in a row and aren't thoughtful about the order.
@@ -42,297 +80,184 @@ div {
42
80
  text-indent: var(--body-indent, var(--text-indent, var(--indent, unset)));
43
81
  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, unset)));
44
82
  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, unset)));
45
- }
46
-
47
- div :global(p),
48
- div :global(blockquote),
49
- div :global(dl),
50
- div :global(ul),
51
- div :global(ol) {
52
- max-width: var(--body-line-width, var(--text-line-width, var(--line-width, 40em)));
53
- font-family: var(--body-body-font-family, var(--text-body-font-family, var(--body-font-family, var(--font-family))));
54
- line-height: var(--body-line-height, var(--text-line-height, var(--line-height, 1.5)));
55
- margin-left: auto;
56
- margin-right: auto;
57
- font-weight: var(--body-body-font-weight, var(--text-body-font-weight, var(--body-font-weight, unset)));
58
- }
59
-
60
- div :global(h1),
61
- div :global(h2),
62
- div :global(h3),
63
- div :global(h4),
64
- div :global(h5),
65
- div :global(h6) {
66
- max-width: var(--body-line-width, var(--text-line-width, var(--line-width, unset)));
67
- margin-left: auto;
68
- margin-right: auto;
69
- box-sizing: border-box;
70
- margin-bottom: var(--body-heading-margin-bottom, var(--text-heading-margin-bottom, var(--heading-margin-bottom, 0)));
71
- margin-top: var(--body-heading-margin-top, var(--text-heading-margin-top, var(--heading-margin-top, 1.5em)));
72
- }
73
-
74
- div :global(h1:first-child),
75
- div :global(h2:first-child),
76
- div :global(h3:first-child),
77
- div :global(h4:first-child),
78
- div :global(h5:first-child),
79
- div :global(h6:first-child) {
80
- margin-top: var(--body-first-heading-margin-top, var(--text-first-heading-margin-top, var(--first-heading-margin-top, 0)));
81
- }
82
-
83
- div :global(h1) {
84
- --_heading-color: var(--body-heading-1-fg, var(--text-heading-1-fg, var(--body-heading-major-fg, var(--text-heading-major-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-1-fg, var(--heading-major-fg, var(--heading-fg, revert)))))))));
85
- color: var(--_heading-color);
86
- --_heading-background: var(--body-heading-1-bg, var(--text-heading-1-bg, var(--body-heading-major-bg, var(--text-heading-major-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-1-bg, var(--heading-major-bg, var(--heading-bg, transparent)))))))));
87
- background: var(--_heading-background);
88
- --_heading-padding: var(--body-heading-1-padding, var(--text-heading-1-padding, var(--body-heading-major-padding, var(--text-heading-major-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-1-padding, var(--heading-major-padding, var(--heading-padding, 0)))))))));
89
- padding: var(--_heading-padding);
90
- --_heading-border: var(--body-heading-1-border, var(--text-heading-1-border, var(--body-heading-major-border, var(--text-heading-major-border, var(--body-heading-border, var(--text-heading-border, var(--heading-1-border, var(--heading-major-border, var(--heading-border, none)))))))));
91
- border: var(--_heading-border);
92
- border-width: var(--body-heading-1-border-width, var(--text-heading-1-border-width, var(--body-heading-major-border-width, var(--text-heading-major-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-1-border-width, var(--heading-major-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
93
- border-style: var(--body-heading-1-border-style, var(--text-heading-1-border-style, var(--body-heading-major-border-style, var(--text-heading-major-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-1-border-style, var(--heading-major-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
94
- border-color: var(--body-heading-1-border-color, var(--text-heading-1-border-color, var(--body-heading-major-border-color, var(--text-heading-major-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-1-border-color, var(--heading-major-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
95
- --_heading-border-radius: var(--body-heading-1-border-radius, var(--text-heading-1-border-radius, var(--body-heading-major-border-radius, var(--text-heading-major-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-1-border-radius, var(--heading-major-border-radius, var(--heading-border-radius, 0)))))))));
96
- border-radius: var(--_heading-border-radius);
97
- --_heading-box-shadow: var(--body-heading-1-box-shadow, var(--text-heading-1-box-shadow, var(--body-heading-major-box-shadow, var(--text-heading-major-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-1-box-shadow, var(--heading-major-box-shadow, var(--heading-box-shadow, none)))))))));
98
- box-shadow: var(--_heading-box-shadow);
99
- font-family: var(--body-heading-1-font-family, var(--text-heading-1-font-family, var(--body-heading-major-font-family, var(--text-heading-major-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-1-font-family, var(--heading-major-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
100
- text-transform: var(--body-heading-1-text-transform, var(--text-heading-1-text-transform, var(--body-heading-major-text-transform, var(--text-heading-major-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-1-text-transform, var(--heading-major-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
101
- text-decoration: var(--body-heading-1-text-decoration, var(--text-heading-1-text-decoration, var(--body-heading-major-text-decoration, var(--text-heading-major-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-1-text-decoration, var(--heading-major-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
102
- font-size: var(--body-heading-1-font-size, var(--text-heading-1-font-size, var(--body-heading-major-font-size, var(--text-heading-major-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-1-font-size, var(--heading-major-font-size, var(--heading-font-size, revert)))))))));
103
- font-weight: var(--body-heading-1-font-weight, var(--text-heading-1-font-weight, var(--body-heading-major-font-weight, var(--text-heading-major-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-1-font-weight, var(--heading-major-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
104
- line-height: var(--body-heading-1-line-height, var(--text-heading-1-line-height, var(--body-heading-major-line-height, var(--text-heading-major-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-1-line-height, var(--heading-major-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
105
- letter-spacing: var(--body-heading-1-letter-spacing, var(--text-heading-1-letter-spacing, var(--body-heading-major-letter-spacing, var(--text-heading-major-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-1-letter-spacing, var(--heading-major-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
106
- text-indent: var(--body-heading-1-indent, var(--text-heading-1-indent, var(--body-heading-major-indent, var(--text-heading-major-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-1-indent, var(--heading-major-indent, var(--heading-indent, var(--indent, revert))))))))));
107
- font-variant: var(--body-heading-1-font-variant, var(--text-heading-1-font-variant, var(--body-heading-major-font-variant, var(--text-heading-major-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-1-font-variant, var(--heading-major-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
108
- text-align: var(--body-heading-1-text-align, var(--text-heading-1-text-align, var(--body-heading-major-text-align, var(--text-heading-major-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-1-text-align, var(--heading-major-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
109
- }
110
-
111
- div :global(h2) {
112
- --_heading-color: var(--body-heading-2-fg, var(--text-heading-2-fg, var(--body-heading-major-fg, var(--text-heading-major-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-2-fg, var(--heading-major-fg, var(--heading-fg, revert)))))))));
113
- color: var(--_heading-color);
114
- --_heading-background: var(--body-heading-2-bg, var(--text-heading-2-bg, var(--body-heading-major-bg, var(--text-heading-major-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-2-bg, var(--heading-major-bg, var(--heading-bg, transparent)))))))));
115
- background: var(--_heading-background);
116
- --_heading-padding: var(--body-heading-2-padding, var(--text-heading-2-padding, var(--body-heading-major-padding, var(--text-heading-major-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-2-padding, var(--heading-major-padding, var(--heading-padding, 0)))))))));
117
- padding: var(--_heading-padding);
118
- --_heading-border: var(--body-heading-2-border, var(--text-heading-2-border, var(--body-heading-major-border, var(--text-heading-major-border, var(--body-heading-border, var(--text-heading-border, var(--heading-2-border, var(--heading-major-border, var(--heading-border, none)))))))));
119
- border: var(--_heading-border);
120
- border-width: var(--body-heading-2-border-width, var(--text-heading-2-border-width, var(--body-heading-major-border-width, var(--text-heading-major-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-2-border-width, var(--heading-major-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
121
- border-style: var(--body-heading-2-border-style, var(--text-heading-2-border-style, var(--body-heading-major-border-style, var(--text-heading-major-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-2-border-style, var(--heading-major-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
122
- border-color: var(--body-heading-2-border-color, var(--text-heading-2-border-color, var(--body-heading-major-border-color, var(--text-heading-major-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-2-border-color, var(--heading-major-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
123
- --_heading-border-radius: var(--body-heading-2-border-radius, var(--text-heading-2-border-radius, var(--body-heading-major-border-radius, var(--text-heading-major-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-2-border-radius, var(--heading-major-border-radius, var(--heading-border-radius, 0)))))))));
124
- border-radius: var(--_heading-border-radius);
125
- --_heading-box-shadow: var(--body-heading-2-box-shadow, var(--text-heading-2-box-shadow, var(--body-heading-major-box-shadow, var(--text-heading-major-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-2-box-shadow, var(--heading-major-box-shadow, var(--heading-box-shadow, none)))))))));
126
- box-shadow: var(--_heading-box-shadow);
127
- font-family: var(--body-heading-2-font-family, var(--text-heading-2-font-family, var(--body-heading-major-font-family, var(--text-heading-major-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-2-font-family, var(--heading-major-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
128
- text-transform: var(--body-heading-2-text-transform, var(--text-heading-2-text-transform, var(--body-heading-major-text-transform, var(--text-heading-major-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-2-text-transform, var(--heading-major-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
129
- text-decoration: var(--body-heading-2-text-decoration, var(--text-heading-2-text-decoration, var(--body-heading-major-text-decoration, var(--text-heading-major-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-2-text-decoration, var(--heading-major-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
130
- font-size: var(--body-heading-2-font-size, var(--text-heading-2-font-size, var(--body-heading-major-font-size, var(--text-heading-major-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-2-font-size, var(--heading-major-font-size, var(--heading-font-size, revert)))))))));
131
- font-weight: var(--body-heading-2-font-weight, var(--text-heading-2-font-weight, var(--body-heading-major-font-weight, var(--text-heading-major-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-2-font-weight, var(--heading-major-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
132
- line-height: var(--body-heading-2-line-height, var(--text-heading-2-line-height, var(--body-heading-major-line-height, var(--text-heading-major-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-2-line-height, var(--heading-major-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
133
- letter-spacing: var(--body-heading-2-letter-spacing, var(--text-heading-2-letter-spacing, var(--body-heading-major-letter-spacing, var(--text-heading-major-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-2-letter-spacing, var(--heading-major-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
134
- text-indent: var(--body-heading-2-indent, var(--text-heading-2-indent, var(--body-heading-major-indent, var(--text-heading-major-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-2-indent, var(--heading-major-indent, var(--heading-indent, var(--indent, revert))))))))));
135
- font-variant: var(--body-heading-2-font-variant, var(--text-heading-2-font-variant, var(--body-heading-major-font-variant, var(--text-heading-major-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-2-font-variant, var(--heading-major-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
136
- text-align: var(--body-heading-2-text-align, var(--text-heading-2-text-align, var(--body-heading-major-text-align, var(--text-heading-major-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-2-text-align, var(--heading-major-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
137
- }
138
-
139
- div :global(h3) {
140
- --_heading-color: var(--body-heading-3-fg, var(--text-heading-3-fg, var(--body-heading-fg, var(--text-heading-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-3-fg, var(--heading-fg, var(--heading-fg, revert)))))))));
141
- color: var(--_heading-color);
142
- --_heading-background: var(--body-heading-3-bg, var(--text-heading-3-bg, var(--body-heading-bg, var(--text-heading-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-3-bg, var(--heading-bg, var(--heading-bg, transparent)))))))));
143
- background: var(--_heading-background);
144
- --_heading-padding: var(--body-heading-3-padding, var(--text-heading-3-padding, var(--body-heading-padding, var(--text-heading-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-3-padding, var(--heading-padding, var(--heading-padding, 0)))))))));
145
- padding: var(--_heading-padding);
146
- --_heading-border: var(--body-heading-3-border, var(--text-heading-3-border, var(--body-heading-border, var(--text-heading-border, var(--body-heading-border, var(--text-heading-border, var(--heading-3-border, var(--heading-border, var(--heading-border, none)))))))));
147
- border: var(--_heading-border);
148
- border-width: var(--body-heading-3-border-width, var(--text-heading-3-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-3-border-width, var(--heading-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
149
- border-style: var(--body-heading-3-border-style, var(--text-heading-3-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-3-border-style, var(--heading-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
150
- border-color: var(--body-heading-3-border-color, var(--text-heading-3-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-3-border-color, var(--heading-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
151
- --_heading-border-radius: var(--body-heading-3-border-radius, var(--text-heading-3-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-3-border-radius, var(--heading-border-radius, var(--heading-border-radius, 0)))))))));
152
- border-radius: var(--_heading-border-radius);
153
- --_heading-box-shadow: var(--body-heading-3-box-shadow, var(--text-heading-3-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-3-box-shadow, var(--heading-box-shadow, var(--heading-box-shadow, none)))))))));
154
- box-shadow: var(--_heading-box-shadow);
155
- font-family: var(--body-heading-3-font-family, var(--text-heading-3-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-3-font-family, var(--heading-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
156
- text-transform: var(--body-heading-3-text-transform, var(--text-heading-3-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-3-text-transform, var(--heading-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
157
- text-decoration: var(--body-heading-3-text-decoration, var(--text-heading-3-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-3-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
158
- font-size: var(--body-heading-3-font-size, var(--text-heading-3-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-3-font-size, var(--heading-font-size, var(--heading-font-size, revert)))))))));
159
- font-weight: var(--body-heading-3-font-weight, var(--text-heading-3-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-3-font-weight, var(--heading-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
160
- line-height: var(--body-heading-3-line-height, var(--text-heading-3-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-3-line-height, var(--heading-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
161
- letter-spacing: var(--body-heading-3-letter-spacing, var(--text-heading-3-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-3-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
162
- text-indent: var(--body-heading-3-indent, var(--text-heading-3-indent, var(--body-heading-indent, var(--text-heading-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-3-indent, var(--heading-indent, var(--heading-indent, var(--indent, revert))))))))));
163
- font-variant: var(--body-heading-3-font-variant, var(--text-heading-3-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-3-font-variant, var(--heading-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
164
- text-align: var(--body-heading-3-text-align, var(--text-heading-3-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-3-text-align, var(--heading-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
165
- }
166
-
167
- div :global(h4) {
168
- --_heading-color: var(--body-heading-4-fg, var(--text-heading-4-fg, var(--body-heading-fg, var(--text-heading-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-4-fg, var(--heading-fg, var(--heading-fg, revert)))))))));
169
- color: var(--_heading-color);
170
- --_heading-background: var(--body-heading-4-bg, var(--text-heading-4-bg, var(--body-heading-bg, var(--text-heading-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-4-bg, var(--heading-bg, var(--heading-bg, transparent)))))))));
171
- background: var(--_heading-background);
172
- --_heading-padding: var(--body-heading-4-padding, var(--text-heading-4-padding, var(--body-heading-padding, var(--text-heading-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-4-padding, var(--heading-padding, var(--heading-padding, 0)))))))));
173
- padding: var(--_heading-padding);
174
- --_heading-border: var(--body-heading-4-border, var(--text-heading-4-border, var(--body-heading-border, var(--text-heading-border, var(--body-heading-border, var(--text-heading-border, var(--heading-4-border, var(--heading-border, var(--heading-border, none)))))))));
175
- border: var(--_heading-border);
176
- border-width: var(--body-heading-4-border-width, var(--text-heading-4-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-4-border-width, var(--heading-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
177
- border-style: var(--body-heading-4-border-style, var(--text-heading-4-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-4-border-style, var(--heading-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
178
- border-color: var(--body-heading-4-border-color, var(--text-heading-4-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-4-border-color, var(--heading-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
179
- --_heading-border-radius: var(--body-heading-4-border-radius, var(--text-heading-4-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-4-border-radius, var(--heading-border-radius, var(--heading-border-radius, 0)))))))));
180
- border-radius: var(--_heading-border-radius);
181
- --_heading-box-shadow: var(--body-heading-4-box-shadow, var(--text-heading-4-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-4-box-shadow, var(--heading-box-shadow, var(--heading-box-shadow, none)))))))));
182
- box-shadow: var(--_heading-box-shadow);
183
- font-family: var(--body-heading-4-font-family, var(--text-heading-4-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-4-font-family, var(--heading-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
184
- text-transform: var(--body-heading-4-text-transform, var(--text-heading-4-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-4-text-transform, var(--heading-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
185
- text-decoration: var(--body-heading-4-text-decoration, var(--text-heading-4-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-4-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
186
- font-size: var(--body-heading-4-font-size, var(--text-heading-4-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-4-font-size, var(--heading-font-size, var(--heading-font-size, revert)))))))));
187
- font-weight: var(--body-heading-4-font-weight, var(--text-heading-4-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-4-font-weight, var(--heading-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
188
- line-height: var(--body-heading-4-line-height, var(--text-heading-4-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-4-line-height, var(--heading-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
189
- letter-spacing: var(--body-heading-4-letter-spacing, var(--text-heading-4-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-4-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
190
- text-indent: var(--body-heading-4-indent, var(--text-heading-4-indent, var(--body-heading-indent, var(--text-heading-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-4-indent, var(--heading-indent, var(--heading-indent, var(--indent, revert))))))))));
191
- font-variant: var(--body-heading-4-font-variant, var(--text-heading-4-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-4-font-variant, var(--heading-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
192
- text-align: var(--body-heading-4-text-align, var(--text-heading-4-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-4-text-align, var(--heading-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
193
- }
194
-
195
- div :global(h5) {
196
- --_heading-color: var(--body-heading-5-fg, var(--text-heading-5-fg, var(--body-heading-minor-fg, var(--text-heading-minor-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-5-fg, var(--heading-minor-fg, var(--heading-fg, revert)))))))));
197
- color: var(--_heading-color);
198
- --_heading-background: var(--body-heading-5-bg, var(--text-heading-5-bg, var(--body-heading-minor-bg, var(--text-heading-minor-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-5-bg, var(--heading-minor-bg, var(--heading-bg, transparent)))))))));
199
- background: var(--_heading-background);
200
- --_heading-padding: var(--body-heading-5-padding, var(--text-heading-5-padding, var(--body-heading-minor-padding, var(--text-heading-minor-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-5-padding, var(--heading-minor-padding, var(--heading-padding, 0)))))))));
201
- padding: var(--_heading-padding);
202
- --_heading-border: var(--body-heading-5-border, var(--text-heading-5-border, var(--body-heading-minor-border, var(--text-heading-minor-border, var(--body-heading-border, var(--text-heading-border, var(--heading-5-border, var(--heading-minor-border, var(--heading-border, none)))))))));
203
- border: var(--_heading-border);
204
- border-width: var(--body-heading-5-border-width, var(--text-heading-5-border-width, var(--body-heading-minor-border-width, var(--text-heading-minor-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-5-border-width, var(--heading-minor-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
205
- border-style: var(--body-heading-5-border-style, var(--text-heading-5-border-style, var(--body-heading-minor-border-style, var(--text-heading-minor-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-5-border-style, var(--heading-minor-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
206
- border-color: var(--body-heading-5-border-color, var(--text-heading-5-border-color, var(--body-heading-minor-border-color, var(--text-heading-minor-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-5-border-color, var(--heading-minor-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
207
- --_heading-border-radius: var(--body-heading-5-border-radius, var(--text-heading-5-border-radius, var(--body-heading-minor-border-radius, var(--text-heading-minor-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-5-border-radius, var(--heading-minor-border-radius, var(--heading-border-radius, 0)))))))));
208
- border-radius: var(--_heading-border-radius);
209
- --_heading-box-shadow: var(--body-heading-5-box-shadow, var(--text-heading-5-box-shadow, var(--body-heading-minor-box-shadow, var(--text-heading-minor-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-5-box-shadow, var(--heading-minor-box-shadow, var(--heading-box-shadow, none)))))))));
210
- box-shadow: var(--_heading-box-shadow);
211
- font-family: var(--body-heading-5-font-family, var(--text-heading-5-font-family, var(--body-heading-minor-font-family, var(--text-heading-minor-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-5-font-family, var(--heading-minor-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
212
- text-transform: var(--body-heading-5-text-transform, var(--text-heading-5-text-transform, var(--body-heading-minor-text-transform, var(--text-heading-minor-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-5-text-transform, var(--heading-minor-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
213
- text-decoration: var(--body-heading-5-text-decoration, var(--text-heading-5-text-decoration, var(--body-heading-minor-text-decoration, var(--text-heading-minor-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-5-text-decoration, var(--heading-minor-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
214
- font-size: var(--body-heading-5-font-size, var(--text-heading-5-font-size, var(--body-heading-minor-font-size, var(--text-heading-minor-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-5-font-size, var(--heading-minor-font-size, var(--heading-font-size, revert)))))))));
215
- font-weight: var(--body-heading-5-font-weight, var(--text-heading-5-font-weight, var(--body-heading-minor-font-weight, var(--text-heading-minor-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-5-font-weight, var(--heading-minor-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
216
- line-height: var(--body-heading-5-line-height, var(--text-heading-5-line-height, var(--body-heading-minor-line-height, var(--text-heading-minor-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-5-line-height, var(--heading-minor-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
217
- letter-spacing: var(--body-heading-5-letter-spacing, var(--text-heading-5-letter-spacing, var(--body-heading-minor-letter-spacing, var(--text-heading-minor-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-5-letter-spacing, var(--heading-minor-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
218
- text-indent: var(--body-heading-5-indent, var(--text-heading-5-indent, var(--body-heading-minor-indent, var(--text-heading-minor-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-5-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))));
219
- font-variant: var(--body-heading-5-font-variant, var(--text-heading-5-font-variant, var(--body-heading-minor-font-variant, var(--text-heading-minor-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-5-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
220
- text-align: var(--body-heading-5-text-align, var(--text-heading-5-text-align, var(--body-heading-minor-text-align, var(--text-heading-minor-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-5-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
221
- }
222
-
223
- div :global(h6) {
224
- --_heading-color: var(--body-heading-6-fg, var(--text-heading-6-fg, var(--body-heading-minor-fg, var(--text-heading-minor-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-6-fg, var(--heading-minor-fg, var(--heading-fg, revert)))))))));
225
- color: var(--_heading-color);
226
- --_heading-background: var(--body-heading-6-bg, var(--text-heading-6-bg, var(--body-heading-minor-bg, var(--text-heading-minor-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-6-bg, var(--heading-minor-bg, var(--heading-bg, transparent)))))))));
227
- background: var(--_heading-background);
228
- --_heading-padding: var(--body-heading-6-padding, var(--text-heading-6-padding, var(--body-heading-minor-padding, var(--text-heading-minor-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-6-padding, var(--heading-minor-padding, var(--heading-padding, 0)))))))));
229
- padding: var(--_heading-padding);
230
- --_heading-border: var(--body-heading-6-border, var(--text-heading-6-border, var(--body-heading-minor-border, var(--text-heading-minor-border, var(--body-heading-border, var(--text-heading-border, var(--heading-6-border, var(--heading-minor-border, var(--heading-border, none)))))))));
231
- border: var(--_heading-border);
232
- border-width: var(--body-heading-6-border-width, var(--text-heading-6-border-width, var(--body-heading-minor-border-width, var(--text-heading-minor-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-6-border-width, var(--heading-minor-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
233
- border-style: var(--body-heading-6-border-style, var(--text-heading-6-border-style, var(--body-heading-minor-border-style, var(--text-heading-minor-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-6-border-style, var(--heading-minor-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
234
- border-color: var(--body-heading-6-border-color, var(--text-heading-6-border-color, var(--body-heading-minor-border-color, var(--text-heading-minor-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-6-border-color, var(--heading-minor-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
235
- --_heading-border-radius: var(--body-heading-6-border-radius, var(--text-heading-6-border-radius, var(--body-heading-minor-border-radius, var(--text-heading-minor-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-6-border-radius, var(--heading-minor-border-radius, var(--heading-border-radius, 0)))))))));
236
- border-radius: var(--_heading-border-radius);
237
- --_heading-box-shadow: var(--body-heading-6-box-shadow, var(--text-heading-6-box-shadow, var(--body-heading-minor-box-shadow, var(--text-heading-minor-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-6-box-shadow, var(--heading-minor-box-shadow, var(--heading-box-shadow, none)))))))));
238
- box-shadow: var(--_heading-box-shadow);
239
- font-family: var(--body-heading-6-font-family, var(--text-heading-6-font-family, var(--body-heading-minor-font-family, var(--text-heading-minor-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-6-font-family, var(--heading-minor-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
240
- text-transform: var(--body-heading-6-text-transform, var(--text-heading-6-text-transform, var(--body-heading-minor-text-transform, var(--text-heading-minor-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-6-text-transform, var(--heading-minor-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
241
- text-decoration: var(--body-heading-6-text-decoration, var(--text-heading-6-text-decoration, var(--body-heading-minor-text-decoration, var(--text-heading-minor-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-6-text-decoration, var(--heading-minor-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
242
- font-size: var(--body-heading-6-font-size, var(--text-heading-6-font-size, var(--body-heading-minor-font-size, var(--text-heading-minor-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-6-font-size, var(--heading-minor-font-size, var(--heading-font-size, revert)))))))));
243
- font-weight: var(--body-heading-6-font-weight, var(--text-heading-6-font-weight, var(--body-heading-minor-font-weight, var(--text-heading-minor-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-6-font-weight, var(--heading-minor-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
244
- line-height: var(--body-heading-6-line-height, var(--text-heading-6-line-height, var(--body-heading-minor-line-height, var(--text-heading-minor-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-6-line-height, var(--heading-minor-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
245
- letter-spacing: var(--body-heading-6-letter-spacing, var(--text-heading-6-letter-spacing, var(--body-heading-minor-letter-spacing, var(--text-heading-minor-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-6-letter-spacing, var(--heading-minor-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
246
- text-indent: var(--body-heading-6-indent, var(--text-heading-6-indent, var(--body-heading-minor-indent, var(--text-heading-minor-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-6-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))));
247
- font-variant: var(--body-heading-6-font-variant, var(--text-heading-6-font-variant, var(--body-heading-minor-font-variant, var(--text-heading-minor-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-6-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
248
- text-align: var(--body-heading-6-text-align, var(--text-heading-6-text-align, var(--body-heading-minor-text-align, var(--text-heading-minor-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-6-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
249
- }
250
-
251
- div :global(p) {
252
- font-family: var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, inherit)));
253
- text-transform: var(--body-paragraph-text-transform, var(--text-paragraph-text-transform, var(--paragraph-text-transform, inherit)));
254
- text-decoration: var(--body-paragraph-text-decoration, var(--text-paragraph-text-decoration, var(--paragraph-text-decoration, inherit)));
255
- --_font-size: var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, inherit)));
256
- font-size: var(--_font-size);
257
- font-weight: var(--body-paragraph-font-weight, var(--text-paragraph-font-weight, var(--paragraph-font-weight, inherit)));
258
- line-height: var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, inherit)));
259
- letter-spacing: var(--body-paragraph-letter-spacing, var(--text-paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)));
260
- text-indent: var(--body-paragraph-indent, var(--text-paragraph-indent, var(--paragraph-indent, inherit)));
261
- font-variant: var(--body-paragraph-font-variant, var(--text-paragraph-font-variant, var(--paragraph-font-variant, inherit)));
262
- text-align: var(--body-paragraph-text-align, var(--text-paragraph-text-align, var(--paragraph-text-align, inherit)));
263
- }
264
-
265
- div :global(p:first-of-type),
266
- div :global(h1 + p),
267
- div :global(h2 + p),
268
- div :global(h3 + p),
269
- div :global(h4 + p),
270
- div :global(h5 + p),
271
- div :global(h6 + p) {
272
- font-family: var(--body-first-paragraph-font-family, var(--text-first-paragraph-font-family, var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, var(--first-paragraph-font-family, inherit))))));
273
- text-transform: var(--body-first-paragraph-text-transform, var(--text-first-paragraph-text-transform, var(--body-paragraph-text-transform, var(--text-paragraph-text-transform, var(--paragraph-text-transform, var(--first-paragraph-text-transform, inherit))))));
274
- text-decoration: var(--body-first-paragraph-text-decoration, var(--text-first-paragraph-text-decoration, var(--body-paragraph-text-decoration, var(--text-paragraph-text-decoration, var(--paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))))));
275
- --_font-size: var(--body-first-paragraph-font-size, var(--text-first-paragraph-font-size, var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, var(--first-paragraph-font-size, inherit))))));
276
- font-size: var(--_font-size);
277
- font-weight: var(--body-first-paragraph-font-weight, var(--text-first-paragraph-font-weight, var(--body-paragraph-font-weight, var(--text-paragraph-font-weight, var(--paragraph-font-weight, var(--first-paragraph-font-weight, inherit))))));
278
- line-height: var(--body-first-paragraph-line-height, var(--text-first-paragraph-line-height, var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, var(--first-paragraph-line-height, inherit))))));
279
- letter-spacing: var(--body-first-paragraph-letter-spacing, var(--text-first-paragraph-letter-spacing, var(--body-paragraph-letter-spacing, var(--text-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))))));
280
- text-indent: var(--body-first-paragraph-indent, var(--text-first-paragraph-indent, var(--body-paragraph-indent, var(--text-paragraph-indent, var(--paragraph-indent, var(--first-paragraph-indent, inherit))))));
281
- font-variant: var(--body-first-paragraph-font-variant, var(--text-first-paragraph-font-variant, var(--body-paragraph-font-variant, var(--text-paragraph-font-variant, var(--paragraph-font-variant, var(--first-paragraph-font-variant, inherit))))));
282
- text-align: var(--body-first-paragraph-text-align, var(--text-first-paragraph-text-align, var(--body-paragraph-text-align, var(--text-paragraph-text-align, var(--paragraph-text-align, var(--first-paragraph-text-align, inherit))))));
283
- font-size: var(--body-first-paragraph-font-size, var(--text-first-paragraph-font-size, var(--first-paragraph-font-size, var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, inherit))))));
284
- line-height: var(--body-first-paragraph-line-height, var(--text-first-paragraph-line-height, var(--first-paragraph-line-height, var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, inherit))))));
285
- margin-block-start: var(--body-first-paragraph-margin-top, var(--text-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
286
- }
287
-
288
- div :global(p:first-of-type::first-line),
289
- div :global(h1 + p::first-line),
290
- div :global(h2 + p::first-line),
291
- div :global(h3 + p::first-line),
292
- div :global(h4 + p::first-line),
293
- div :global(h5 + p::first-line),
294
- div :global(h6 + p::first-line) {
295
- font-family: var(--first-line-font-family, var(--body-first-line-font-family, var(--text-first-line-font-family, var(--first-line-font-family, inherit))));
296
- text-transform: var(--first-line-text-transform, var(--body-first-line-text-transform, var(--text-first-line-text-transform, var(--first-line-text-transform, inherit))));
297
- text-decoration: var(--first-line-text-decoration, var(--body-first-line-text-decoration, var(--text-first-line-text-decoration, var(--first-line-text-decoration, inherit))));
298
- --_font-size: var(--first-line-font-size, var(--body-first-line-font-size, var(--text-first-line-font-size, var(--first-line-font-size, inherit))));
299
- font-size: var(--_font-size);
300
- font-weight: var(--first-line-font-weight, var(--body-first-line-font-weight, var(--text-first-line-font-weight, var(--first-line-font-weight, inherit))));
301
- line-height: var(--first-line-line-height, var(--body-first-line-line-height, var(--text-first-line-line-height, var(--first-line-line-height, inherit))));
302
- letter-spacing: var(--first-line-letter-spacing, var(--body-first-line-letter-spacing, var(--text-first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
303
- text-indent: var(--first-line-indent, var(--body-first-line-indent, var(--text-first-line-indent, var(--first-line-indent, inherit))));
304
- font-variant: var(--first-line-font-variant, var(--body-first-line-font-variant, var(--text-first-line-font-variant, var(--first-line-font-variant, inherit))));
305
- text-align: var(--first-line-text-align, var(--body-first-line-text-align, var(--text-first-line-text-align, var(--first-line-text-align, inherit))));
306
- }
307
-
308
- div :global(p:first-of-type::first-letter),
309
- div :global(h1 + p::first-letter),
310
- div :global(h2 + p::first-letter),
311
- div :global(h3 + p::first-letter),
312
- div :global(h4 + p::first-letter),
313
- div :global(h5 + p::first-letter),
314
- div :global(h6 + p::first-letter) {
315
- font-family: var(--first-letter-font-family, var(--body-first-letter-font-family, var(--text-first-letter-font-family, inherit)));
316
- text-transform: var(--first-letter-text-transform, var(--body-first-letter-text-transform, var(--text-first-letter-text-transform, inherit)));
317
- text-decoration: var(--first-letter-text-decoration, var(--body-first-letter-text-decoration, var(--text-first-letter-text-decoration, inherit)));
318
- --_font-size: var(--first-letter-font-size, var(--body-first-letter-font-size, var(--text-first-letter-font-size, inherit)));
319
- font-size: var(--_font-size);
320
- font-weight: var(--first-letter-font-weight, var(--body-first-letter-font-weight, var(--text-first-letter-font-weight, inherit)));
321
- line-height: var(--first-letter-line-height, var(--body-first-letter-line-height, var(--text-first-letter-line-height, inherit)));
322
- letter-spacing: var(--first-letter-letter-spacing, var(--body-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, inherit)));
323
- text-indent: var(--first-letter-indent, var(--body-first-letter-indent, var(--text-first-letter-indent, inherit)));
324
- font-variant: var(--first-letter-font-variant, var(--body-first-letter-font-variant, var(--text-first-letter-font-variant, inherit)));
325
- text-align: var(--first-letter-text-align, var(--body-first-letter-text-align, var(--text-first-letter-text-align, inherit)));
326
- --link-bg: var(--body-link-bg, var(--text-link-bg, inherit));
327
- --link-fg: var(--body-link-fg, var(--text-link-fg, inherit));
328
- background: var(--body-first-letter-bg, var(--first-letter-bg, inherit));
329
- color: var(--body-first-letter-fg, var(--first-letter-fg, inherit));
330
- float: var(--first-letter-float, none);
331
- margin-right: var(--first-letter-margin-right, 0);
332
- padding-top: var(--first-letter-padding-top, 0);
333
- }
334
-
335
- div {
83
+ --_prose-max-width: var(--body-line-width, var(--text-line-width, var(--line-width, 40em)));
84
+ --_prose-font-family: var(--body-body-font-family, var(--text-body-font-family, var(--body-font-family, var(--font-family))));
85
+ --_prose-line-height: var(--body-line-height, var(--text-line-height, var(--line-height, 1.5)));
86
+ /* Start-aligned: a measure-capped paragraph in a Card or a Tile sits
87
+ against its container's leading edge like any other block. Centring the
88
+ measure is what a prose column asks for, and TextLayout -- the one
89
+ component that IS a prose column -- opts back in to `auto`. */
90
+ --_prose-margin-inline: var(--body-prose-margin-inline, var(--text-prose-margin-inline, var(--prose-margin-inline, 0)));
91
+ --_prose-font-weight: var(--body-body-font-weight, var(--text-body-font-weight, var(--body-font-weight, unset)));
92
+ --_paragraph-font-family: var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, inherit)));
93
+ --_paragraph-text-transform: var(--body-paragraph-text-transform, var(--text-paragraph-text-transform, var(--paragraph-text-transform, inherit)));
94
+ --_paragraph-text-decoration: var(--body-paragraph-text-decoration, var(--text-paragraph-text-decoration, var(--paragraph-text-decoration, inherit)));
95
+ --_paragraph-font-size: var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, inherit)));
96
+ --_paragraph-font-weight: var(--body-paragraph-font-weight, var(--text-paragraph-font-weight, var(--paragraph-font-weight, inherit)));
97
+ --_paragraph-line-height: var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, inherit)));
98
+ --_paragraph-letter-spacing: var(--body-paragraph-letter-spacing, var(--text-paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)));
99
+ --_paragraph-text-indent: var(--body-paragraph-indent, var(--text-paragraph-indent, var(--paragraph-indent, inherit)));
100
+ --_paragraph-font-variant: var(--body-paragraph-font-variant, var(--text-paragraph-font-variant, var(--paragraph-font-variant, inherit)));
101
+ --_paragraph-text-align: var(--body-paragraph-text-align, var(--text-paragraph-text-align, var(--paragraph-text-align, inherit)));
102
+ --_first-paragraph-font-family: var(--body-first-paragraph-font-family, var(--text-first-paragraph-font-family, var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, inherit)))));
103
+ --_first-paragraph-text-transform: var(--body-first-paragraph-text-transform, var(--text-first-paragraph-text-transform, var(--body-paragraph-text-transform, var(--text-paragraph-text-transform, var(--paragraph-text-transform, inherit)))));
104
+ --_first-paragraph-text-decoration: var(--body-first-paragraph-text-decoration, var(--text-first-paragraph-text-decoration, var(--body-paragraph-text-decoration, var(--text-paragraph-text-decoration, var(--paragraph-text-decoration, inherit)))));
105
+ --_first-paragraph-font-weight: var(--body-first-paragraph-font-weight, var(--text-first-paragraph-font-weight, var(--body-paragraph-font-weight, var(--text-paragraph-font-weight, var(--paragraph-font-weight, inherit)))));
106
+ --_first-paragraph-letter-spacing: var(--body-first-paragraph-letter-spacing, var(--text-first-paragraph-letter-spacing, var(--body-paragraph-letter-spacing, var(--text-paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)))));
107
+ --_first-paragraph-text-indent: var(--body-first-paragraph-indent, var(--text-first-paragraph-indent, var(--body-paragraph-indent, var(--text-paragraph-indent, var(--paragraph-indent, inherit)))));
108
+ --_first-paragraph-font-variant: var(--body-first-paragraph-font-variant, var(--text-first-paragraph-font-variant, var(--body-paragraph-font-variant, var(--text-paragraph-font-variant, var(--paragraph-font-variant, inherit)))));
109
+ --_first-paragraph-text-align: var(--body-first-paragraph-text-align, var(--text-first-paragraph-text-align, var(--body-paragraph-text-align, var(--text-paragraph-text-align, var(--paragraph-text-align, inherit)))));
110
+ --_first-paragraph-font-size: var(--body-first-paragraph-font-size, var(--text-first-paragraph-font-size, var(--first-paragraph-font-size, var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, inherit))))));
111
+ --_first-paragraph-line-height: var(--body-first-paragraph-line-height, var(--text-first-paragraph-line-height, var(--first-paragraph-line-height, var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, inherit))))));
112
+ --_first-paragraph-margin-top: var(--body-first-paragraph-margin-top, var(--text-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
113
+ --_first-line-font-family: var(--first-line-font-family, var(--body-first-line-font-family, var(--text-first-line-font-family, var(--first-line-font-family, inherit))));
114
+ --_first-line-text-transform: var(--first-line-text-transform, var(--body-first-line-text-transform, var(--text-first-line-text-transform, var(--first-line-text-transform, inherit))));
115
+ --_first-line-text-decoration: var(--first-line-text-decoration, var(--body-first-line-text-decoration, var(--text-first-line-text-decoration, var(--first-line-text-decoration, inherit))));
116
+ --_first-line-font-size: var(--first-line-font-size, var(--body-first-line-font-size, var(--text-first-line-font-size, var(--first-line-font-size, inherit))));
117
+ --_first-line-font-weight: var(--first-line-font-weight, var(--body-first-line-font-weight, var(--text-first-line-font-weight, var(--first-line-font-weight, inherit))));
118
+ --_first-line-line-height: var(--first-line-line-height, var(--body-first-line-line-height, var(--text-first-line-line-height, var(--first-line-line-height, inherit))));
119
+ --_first-line-letter-spacing: var(--first-line-letter-spacing, var(--body-first-line-letter-spacing, var(--text-first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
120
+ --_first-line-text-indent: var(--first-line-indent, var(--body-first-line-indent, var(--text-first-line-indent, var(--first-line-indent, inherit))));
121
+ --_first-line-font-variant: var(--first-line-font-variant, var(--body-first-line-font-variant, var(--text-first-line-font-variant, var(--first-line-font-variant, inherit))));
122
+ --_first-line-text-align: var(--first-line-text-align, var(--body-first-line-text-align, var(--text-first-line-text-align, var(--first-line-text-align, inherit))));
123
+ --_first-letter-font-family: var(--first-letter-font-family, var(--body-first-letter-font-family, var(--text-first-letter-font-family, inherit)));
124
+ --_first-letter-text-transform: var(--first-letter-text-transform, var(--body-first-letter-text-transform, var(--text-first-letter-text-transform, inherit)));
125
+ --_first-letter-text-decoration: var(--first-letter-text-decoration, var(--body-first-letter-text-decoration, var(--text-first-letter-text-decoration, inherit)));
126
+ --_first-letter-font-size: var(--first-letter-font-size, var(--body-first-letter-font-size, var(--text-first-letter-font-size, inherit)));
127
+ --_first-letter-font-weight: var(--first-letter-font-weight, var(--body-first-letter-font-weight, var(--text-first-letter-font-weight, inherit)));
128
+ --_first-letter-line-height: var(--first-letter-line-height, var(--body-first-letter-line-height, var(--text-first-letter-line-height, inherit)));
129
+ --_first-letter-letter-spacing: var(--first-letter-letter-spacing, var(--body-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, inherit)));
130
+ --_first-letter-text-indent: var(--first-letter-indent, var(--body-first-letter-indent, var(--text-first-letter-indent, inherit)));
131
+ --_first-letter-font-variant: var(--first-letter-font-variant, var(--body-first-letter-font-variant, var(--text-first-letter-font-variant, inherit)));
132
+ --_first-letter-text-align: var(--first-letter-text-align, var(--body-first-letter-text-align, var(--text-first-letter-text-align, inherit)));
133
+ --_first-letter-link-bg: var(--body-link-bg, var(--text-link-bg, inherit));
134
+ --_first-letter-link-fg: var(--body-link-fg, var(--text-link-fg, inherit));
135
+ --_first-letter-background: var(--body-first-letter-bg, var(--first-letter-bg, inherit));
136
+ --_first-letter-color: var(--body-first-letter-fg, var(--first-letter-fg, inherit));
137
+ /* Private context vars only -- consumed once, globally, by the :where()
138
+ rule in vars/typography-context.css, not by a selector matching h1-h6 here.
139
+ See the comment above heading-box-context-vars(). */
140
+ --_heading-max-width: var(--body-line-width, var(--text-line-width, var(--line-width, unset)));
141
+ /* Same as --_prose-margin-inline: start-aligned in a container, centred
142
+ only by TextLayout. */
143
+ --_heading-margin-inline: var(--body-heading-margin-inline, var(--text-heading-margin-inline, var(--heading-margin-inline, 0)));
144
+ --_heading-margin-bottom: var(--body-heading-margin-bottom, var(--text-heading-margin-bottom, var(--heading-margin-bottom, 0)));
145
+ --_heading-margin-top: var(--body-heading-margin-top, var(--text-heading-margin-top, var(--heading-margin-top, 1.5em)));
146
+ --_heading-first-margin-top: var(--body-first-heading-margin-top, var(--text-first-heading-margin-top, var(--first-heading-margin-top, 0)));
147
+ --_h1-color: var(--body-heading-1-fg, var(--text-heading-1-fg, var(--body-heading-major-fg, var(--text-heading-major-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-1-fg, var(--heading-major-fg, var(--heading-fg, revert)))))))));
148
+ --_h1-background: var(--body-heading-1-bg, var(--text-heading-1-bg, var(--body-heading-major-bg, var(--text-heading-major-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-1-bg, var(--heading-major-bg, var(--heading-bg, transparent)))))))));
149
+ --_h1-padding: var(--body-heading-1-padding, var(--text-heading-1-padding, var(--body-heading-major-padding, var(--text-heading-major-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-1-padding, var(--heading-major-padding, var(--heading-padding, 0)))))))));
150
+ --_h1-border: var(--body-heading-1-border, var(--text-heading-1-border, var(--body-heading-major-border, var(--text-heading-major-border, var(--body-heading-border, var(--text-heading-border, var(--heading-1-border, var(--heading-major-border, var(--heading-border, none)))))))));
151
+ --_h1-border-width: var(--body-heading-1-border-width, var(--text-heading-1-border-width, var(--body-heading-major-border-width, var(--text-heading-major-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-1-border-width, var(--heading-major-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
152
+ --_h1-border-style: var(--body-heading-1-border-style, var(--text-heading-1-border-style, var(--body-heading-major-border-style, var(--text-heading-major-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-1-border-style, var(--heading-major-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
153
+ --_h1-border-color: var(--body-heading-1-border-color, var(--text-heading-1-border-color, var(--body-heading-major-border-color, var(--text-heading-major-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-1-border-color, var(--heading-major-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
154
+ --_h1-border-radius: var(--body-heading-1-border-radius, var(--text-heading-1-border-radius, var(--body-heading-major-border-radius, var(--text-heading-major-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-1-border-radius, var(--heading-major-border-radius, var(--heading-border-radius, 0)))))))));
155
+ --_h1-box-shadow: var(--body-heading-1-box-shadow, var(--text-heading-1-box-shadow, var(--body-heading-major-box-shadow, var(--text-heading-major-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-1-box-shadow, var(--heading-major-box-shadow, var(--heading-box-shadow, none)))))))));
156
+ --_h1-font-family: var(--body-heading-1-font-family, var(--text-heading-1-font-family, var(--body-heading-major-font-family, var(--text-heading-major-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-1-font-family, var(--heading-major-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
157
+ --_h1-text-transform: var(--body-heading-1-text-transform, var(--text-heading-1-text-transform, var(--body-heading-major-text-transform, var(--text-heading-major-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-1-text-transform, var(--heading-major-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
158
+ --_h1-text-decoration: var(--body-heading-1-text-decoration, var(--text-heading-1-text-decoration, var(--body-heading-major-text-decoration, var(--text-heading-major-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-1-text-decoration, var(--heading-major-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
159
+ --_h1-font-size: var(--body-heading-1-font-size, var(--text-heading-1-font-size, var(--body-heading-major-font-size, var(--text-heading-major-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-1-font-size, var(--heading-major-font-size, var(--heading-font-size, revert)))))))));
160
+ --_h1-font-weight: var(--body-heading-1-font-weight, var(--text-heading-1-font-weight, var(--body-heading-major-font-weight, var(--text-heading-major-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-1-font-weight, var(--heading-major-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
161
+ --_h1-line-height: var(--body-heading-1-line-height, var(--text-heading-1-line-height, var(--body-heading-major-line-height, var(--text-heading-major-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-1-line-height, var(--heading-major-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
162
+ --_h1-letter-spacing: var(--body-heading-1-letter-spacing, var(--text-heading-1-letter-spacing, var(--body-heading-major-letter-spacing, var(--text-heading-major-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-1-letter-spacing, var(--heading-major-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
163
+ --_h1-text-indent: var(--body-heading-1-indent, var(--text-heading-1-indent, var(--body-heading-major-indent, var(--text-heading-major-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-1-indent, var(--heading-major-indent, var(--heading-indent, var(--indent, revert))))))))));
164
+ --_h1-font-variant: var(--body-heading-1-font-variant, var(--text-heading-1-font-variant, var(--body-heading-major-font-variant, var(--text-heading-major-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-1-font-variant, var(--heading-major-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
165
+ --_h1-text-align: var(--body-heading-1-text-align, var(--text-heading-1-text-align, var(--body-heading-major-text-align, var(--text-heading-major-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-1-text-align, var(--heading-major-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
166
+ --_h2-color: var(--body-heading-2-fg, var(--text-heading-2-fg, var(--body-heading-major-fg, var(--text-heading-major-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-2-fg, var(--heading-major-fg, var(--heading-fg, revert)))))))));
167
+ --_h2-background: var(--body-heading-2-bg, var(--text-heading-2-bg, var(--body-heading-major-bg, var(--text-heading-major-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-2-bg, var(--heading-major-bg, var(--heading-bg, transparent)))))))));
168
+ --_h2-padding: var(--body-heading-2-padding, var(--text-heading-2-padding, var(--body-heading-major-padding, var(--text-heading-major-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-2-padding, var(--heading-major-padding, var(--heading-padding, 0)))))))));
169
+ --_h2-border: var(--body-heading-2-border, var(--text-heading-2-border, var(--body-heading-major-border, var(--text-heading-major-border, var(--body-heading-border, var(--text-heading-border, var(--heading-2-border, var(--heading-major-border, var(--heading-border, none)))))))));
170
+ --_h2-border-width: var(--body-heading-2-border-width, var(--text-heading-2-border-width, var(--body-heading-major-border-width, var(--text-heading-major-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-2-border-width, var(--heading-major-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
171
+ --_h2-border-style: var(--body-heading-2-border-style, var(--text-heading-2-border-style, var(--body-heading-major-border-style, var(--text-heading-major-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-2-border-style, var(--heading-major-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
172
+ --_h2-border-color: var(--body-heading-2-border-color, var(--text-heading-2-border-color, var(--body-heading-major-border-color, var(--text-heading-major-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-2-border-color, var(--heading-major-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
173
+ --_h2-border-radius: var(--body-heading-2-border-radius, var(--text-heading-2-border-radius, var(--body-heading-major-border-radius, var(--text-heading-major-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-2-border-radius, var(--heading-major-border-radius, var(--heading-border-radius, 0)))))))));
174
+ --_h2-box-shadow: var(--body-heading-2-box-shadow, var(--text-heading-2-box-shadow, var(--body-heading-major-box-shadow, var(--text-heading-major-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-2-box-shadow, var(--heading-major-box-shadow, var(--heading-box-shadow, none)))))))));
175
+ --_h2-font-family: var(--body-heading-2-font-family, var(--text-heading-2-font-family, var(--body-heading-major-font-family, var(--text-heading-major-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-2-font-family, var(--heading-major-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
176
+ --_h2-text-transform: var(--body-heading-2-text-transform, var(--text-heading-2-text-transform, var(--body-heading-major-text-transform, var(--text-heading-major-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-2-text-transform, var(--heading-major-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
177
+ --_h2-text-decoration: var(--body-heading-2-text-decoration, var(--text-heading-2-text-decoration, var(--body-heading-major-text-decoration, var(--text-heading-major-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-2-text-decoration, var(--heading-major-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
178
+ --_h2-font-size: var(--body-heading-2-font-size, var(--text-heading-2-font-size, var(--body-heading-major-font-size, var(--text-heading-major-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-2-font-size, var(--heading-major-font-size, var(--heading-font-size, revert)))))))));
179
+ --_h2-font-weight: var(--body-heading-2-font-weight, var(--text-heading-2-font-weight, var(--body-heading-major-font-weight, var(--text-heading-major-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-2-font-weight, var(--heading-major-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
180
+ --_h2-line-height: var(--body-heading-2-line-height, var(--text-heading-2-line-height, var(--body-heading-major-line-height, var(--text-heading-major-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-2-line-height, var(--heading-major-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
181
+ --_h2-letter-spacing: var(--body-heading-2-letter-spacing, var(--text-heading-2-letter-spacing, var(--body-heading-major-letter-spacing, var(--text-heading-major-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-2-letter-spacing, var(--heading-major-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
182
+ --_h2-text-indent: var(--body-heading-2-indent, var(--text-heading-2-indent, var(--body-heading-major-indent, var(--text-heading-major-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-2-indent, var(--heading-major-indent, var(--heading-indent, var(--indent, revert))))))))));
183
+ --_h2-font-variant: var(--body-heading-2-font-variant, var(--text-heading-2-font-variant, var(--body-heading-major-font-variant, var(--text-heading-major-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-2-font-variant, var(--heading-major-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
184
+ --_h2-text-align: var(--body-heading-2-text-align, var(--text-heading-2-text-align, var(--body-heading-major-text-align, var(--text-heading-major-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-2-text-align, var(--heading-major-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
185
+ --_h3-color: var(--body-heading-3-fg, var(--text-heading-3-fg, var(--body-heading-fg, var(--text-heading-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-3-fg, var(--heading-fg, var(--heading-fg, revert)))))))));
186
+ --_h3-background: var(--body-heading-3-bg, var(--text-heading-3-bg, var(--body-heading-bg, var(--text-heading-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-3-bg, var(--heading-bg, var(--heading-bg, transparent)))))))));
187
+ --_h3-padding: var(--body-heading-3-padding, var(--text-heading-3-padding, var(--body-heading-padding, var(--text-heading-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-3-padding, var(--heading-padding, var(--heading-padding, 0)))))))));
188
+ --_h3-border: var(--body-heading-3-border, var(--text-heading-3-border, var(--body-heading-border, var(--text-heading-border, var(--body-heading-border, var(--text-heading-border, var(--heading-3-border, var(--heading-border, var(--heading-border, none)))))))));
189
+ --_h3-border-width: var(--body-heading-3-border-width, var(--text-heading-3-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-3-border-width, var(--heading-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
190
+ --_h3-border-style: var(--body-heading-3-border-style, var(--text-heading-3-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-3-border-style, var(--heading-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
191
+ --_h3-border-color: var(--body-heading-3-border-color, var(--text-heading-3-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-3-border-color, var(--heading-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
192
+ --_h3-border-radius: var(--body-heading-3-border-radius, var(--text-heading-3-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-3-border-radius, var(--heading-border-radius, var(--heading-border-radius, 0)))))))));
193
+ --_h3-box-shadow: var(--body-heading-3-box-shadow, var(--text-heading-3-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-3-box-shadow, var(--heading-box-shadow, var(--heading-box-shadow, none)))))))));
194
+ --_h3-font-family: var(--body-heading-3-font-family, var(--text-heading-3-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-3-font-family, var(--heading-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
195
+ --_h3-text-transform: var(--body-heading-3-text-transform, var(--text-heading-3-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-3-text-transform, var(--heading-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
196
+ --_h3-text-decoration: var(--body-heading-3-text-decoration, var(--text-heading-3-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-3-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
197
+ --_h3-font-size: var(--body-heading-3-font-size, var(--text-heading-3-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-3-font-size, var(--heading-font-size, var(--heading-font-size, revert)))))))));
198
+ --_h3-font-weight: var(--body-heading-3-font-weight, var(--text-heading-3-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-3-font-weight, var(--heading-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
199
+ --_h3-line-height: var(--body-heading-3-line-height, var(--text-heading-3-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-3-line-height, var(--heading-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
200
+ --_h3-letter-spacing: var(--body-heading-3-letter-spacing, var(--text-heading-3-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-3-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
201
+ --_h3-text-indent: var(--body-heading-3-indent, var(--text-heading-3-indent, var(--body-heading-indent, var(--text-heading-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-3-indent, var(--heading-indent, var(--heading-indent, var(--indent, revert))))))))));
202
+ --_h3-font-variant: var(--body-heading-3-font-variant, var(--text-heading-3-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-3-font-variant, var(--heading-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
203
+ --_h3-text-align: var(--body-heading-3-text-align, var(--text-heading-3-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-3-text-align, var(--heading-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
204
+ --_h4-color: var(--body-heading-4-fg, var(--text-heading-4-fg, var(--body-heading-fg, var(--text-heading-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-4-fg, var(--heading-fg, var(--heading-fg, revert)))))))));
205
+ --_h4-background: var(--body-heading-4-bg, var(--text-heading-4-bg, var(--body-heading-bg, var(--text-heading-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-4-bg, var(--heading-bg, var(--heading-bg, transparent)))))))));
206
+ --_h4-padding: var(--body-heading-4-padding, var(--text-heading-4-padding, var(--body-heading-padding, var(--text-heading-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-4-padding, var(--heading-padding, var(--heading-padding, 0)))))))));
207
+ --_h4-border: var(--body-heading-4-border, var(--text-heading-4-border, var(--body-heading-border, var(--text-heading-border, var(--body-heading-border, var(--text-heading-border, var(--heading-4-border, var(--heading-border, var(--heading-border, none)))))))));
208
+ --_h4-border-width: var(--body-heading-4-border-width, var(--text-heading-4-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-4-border-width, var(--heading-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
209
+ --_h4-border-style: var(--body-heading-4-border-style, var(--text-heading-4-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-4-border-style, var(--heading-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
210
+ --_h4-border-color: var(--body-heading-4-border-color, var(--text-heading-4-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-4-border-color, var(--heading-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
211
+ --_h4-border-radius: var(--body-heading-4-border-radius, var(--text-heading-4-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-4-border-radius, var(--heading-border-radius, var(--heading-border-radius, 0)))))))));
212
+ --_h4-box-shadow: var(--body-heading-4-box-shadow, var(--text-heading-4-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-4-box-shadow, var(--heading-box-shadow, var(--heading-box-shadow, none)))))))));
213
+ --_h4-font-family: var(--body-heading-4-font-family, var(--text-heading-4-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-4-font-family, var(--heading-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
214
+ --_h4-text-transform: var(--body-heading-4-text-transform, var(--text-heading-4-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-4-text-transform, var(--heading-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
215
+ --_h4-text-decoration: var(--body-heading-4-text-decoration, var(--text-heading-4-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-4-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
216
+ --_h4-font-size: var(--body-heading-4-font-size, var(--text-heading-4-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-4-font-size, var(--heading-font-size, var(--heading-font-size, revert)))))))));
217
+ --_h4-font-weight: var(--body-heading-4-font-weight, var(--text-heading-4-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-4-font-weight, var(--heading-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
218
+ --_h4-line-height: var(--body-heading-4-line-height, var(--text-heading-4-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-4-line-height, var(--heading-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
219
+ --_h4-letter-spacing: var(--body-heading-4-letter-spacing, var(--text-heading-4-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-4-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
220
+ --_h4-text-indent: var(--body-heading-4-indent, var(--text-heading-4-indent, var(--body-heading-indent, var(--text-heading-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-4-indent, var(--heading-indent, var(--heading-indent, var(--indent, revert))))))))));
221
+ --_h4-font-variant: var(--body-heading-4-font-variant, var(--text-heading-4-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-4-font-variant, var(--heading-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
222
+ --_h4-text-align: var(--body-heading-4-text-align, var(--text-heading-4-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-4-text-align, var(--heading-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
223
+ --_h5-color: var(--body-heading-5-fg, var(--text-heading-5-fg, var(--body-heading-minor-fg, var(--text-heading-minor-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-5-fg, var(--heading-minor-fg, var(--heading-fg, revert)))))))));
224
+ --_h5-background: var(--body-heading-5-bg, var(--text-heading-5-bg, var(--body-heading-minor-bg, var(--text-heading-minor-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-5-bg, var(--heading-minor-bg, var(--heading-bg, transparent)))))))));
225
+ --_h5-padding: var(--body-heading-5-padding, var(--text-heading-5-padding, var(--body-heading-minor-padding, var(--text-heading-minor-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-5-padding, var(--heading-minor-padding, var(--heading-padding, 0)))))))));
226
+ --_h5-border: var(--body-heading-5-border, var(--text-heading-5-border, var(--body-heading-minor-border, var(--text-heading-minor-border, var(--body-heading-border, var(--text-heading-border, var(--heading-5-border, var(--heading-minor-border, var(--heading-border, none)))))))));
227
+ --_h5-border-width: var(--body-heading-5-border-width, var(--text-heading-5-border-width, var(--body-heading-minor-border-width, var(--text-heading-minor-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-5-border-width, var(--heading-minor-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
228
+ --_h5-border-style: var(--body-heading-5-border-style, var(--text-heading-5-border-style, var(--body-heading-minor-border-style, var(--text-heading-minor-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-5-border-style, var(--heading-minor-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
229
+ --_h5-border-color: var(--body-heading-5-border-color, var(--text-heading-5-border-color, var(--body-heading-minor-border-color, var(--text-heading-minor-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-5-border-color, var(--heading-minor-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
230
+ --_h5-border-radius: var(--body-heading-5-border-radius, var(--text-heading-5-border-radius, var(--body-heading-minor-border-radius, var(--text-heading-minor-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-5-border-radius, var(--heading-minor-border-radius, var(--heading-border-radius, 0)))))))));
231
+ --_h5-box-shadow: var(--body-heading-5-box-shadow, var(--text-heading-5-box-shadow, var(--body-heading-minor-box-shadow, var(--text-heading-minor-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-5-box-shadow, var(--heading-minor-box-shadow, var(--heading-box-shadow, none)))))))));
232
+ --_h5-font-family: var(--body-heading-5-font-family, var(--text-heading-5-font-family, var(--body-heading-minor-font-family, var(--text-heading-minor-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-5-font-family, var(--heading-minor-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
233
+ --_h5-text-transform: var(--body-heading-5-text-transform, var(--text-heading-5-text-transform, var(--body-heading-minor-text-transform, var(--text-heading-minor-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-5-text-transform, var(--heading-minor-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
234
+ --_h5-text-decoration: var(--body-heading-5-text-decoration, var(--text-heading-5-text-decoration, var(--body-heading-minor-text-decoration, var(--text-heading-minor-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-5-text-decoration, var(--heading-minor-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
235
+ --_h5-font-size: var(--body-heading-5-font-size, var(--text-heading-5-font-size, var(--body-heading-minor-font-size, var(--text-heading-minor-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-5-font-size, var(--heading-minor-font-size, var(--heading-font-size, revert)))))))));
236
+ --_h5-font-weight: var(--body-heading-5-font-weight, var(--text-heading-5-font-weight, var(--body-heading-minor-font-weight, var(--text-heading-minor-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-5-font-weight, var(--heading-minor-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
237
+ --_h5-line-height: var(--body-heading-5-line-height, var(--text-heading-5-line-height, var(--body-heading-minor-line-height, var(--text-heading-minor-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-5-line-height, var(--heading-minor-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
238
+ --_h5-letter-spacing: var(--body-heading-5-letter-spacing, var(--text-heading-5-letter-spacing, var(--body-heading-minor-letter-spacing, var(--text-heading-minor-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-5-letter-spacing, var(--heading-minor-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
239
+ --_h5-text-indent: var(--body-heading-5-indent, var(--text-heading-5-indent, var(--body-heading-minor-indent, var(--text-heading-minor-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-5-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))));
240
+ --_h5-font-variant: var(--body-heading-5-font-variant, var(--text-heading-5-font-variant, var(--body-heading-minor-font-variant, var(--text-heading-minor-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-5-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
241
+ --_h5-text-align: var(--body-heading-5-text-align, var(--text-heading-5-text-align, var(--body-heading-minor-text-align, var(--text-heading-minor-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-5-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
242
+ --_h6-color: var(--body-heading-6-fg, var(--text-heading-6-fg, var(--body-heading-minor-fg, var(--text-heading-minor-fg, var(--body-heading-fg, var(--text-heading-fg, var(--heading-6-fg, var(--heading-minor-fg, var(--heading-fg, revert)))))))));
243
+ --_h6-background: var(--body-heading-6-bg, var(--text-heading-6-bg, var(--body-heading-minor-bg, var(--text-heading-minor-bg, var(--body-heading-bg, var(--text-heading-bg, var(--heading-6-bg, var(--heading-minor-bg, var(--heading-bg, transparent)))))))));
244
+ --_h6-padding: var(--body-heading-6-padding, var(--text-heading-6-padding, var(--body-heading-minor-padding, var(--text-heading-minor-padding, var(--body-heading-padding, var(--text-heading-padding, var(--heading-6-padding, var(--heading-minor-padding, var(--heading-padding, 0)))))))));
245
+ --_h6-border: var(--body-heading-6-border, var(--text-heading-6-border, var(--body-heading-minor-border, var(--text-heading-minor-border, var(--body-heading-border, var(--text-heading-border, var(--heading-6-border, var(--heading-minor-border, var(--heading-border, none)))))))));
246
+ --_h6-border-width: var(--body-heading-6-border-width, var(--text-heading-6-border-width, var(--body-heading-minor-border-width, var(--text-heading-minor-border-width, var(--body-heading-border-width, var(--text-heading-border-width, var(--heading-6-border-width, var(--heading-minor-border-width, var(--heading-border-width, var(--__missing-border-width))))))))));
247
+ --_h6-border-style: var(--body-heading-6-border-style, var(--text-heading-6-border-style, var(--body-heading-minor-border-style, var(--text-heading-minor-border-style, var(--body-heading-border-style, var(--text-heading-border-style, var(--heading-6-border-style, var(--heading-minor-border-style, var(--heading-border-style, var(--__missing-border-style))))))))));
248
+ --_h6-border-color: var(--body-heading-6-border-color, var(--text-heading-6-border-color, var(--body-heading-minor-border-color, var(--text-heading-minor-border-color, var(--body-heading-border-color, var(--text-heading-border-color, var(--heading-6-border-color, var(--heading-minor-border-color, var(--heading-border-color, var(--__missing-border-color))))))))));
249
+ --_h6-border-radius: var(--body-heading-6-border-radius, var(--text-heading-6-border-radius, var(--body-heading-minor-border-radius, var(--text-heading-minor-border-radius, var(--body-heading-border-radius, var(--text-heading-border-radius, var(--heading-6-border-radius, var(--heading-minor-border-radius, var(--heading-border-radius, 0)))))))));
250
+ --_h6-box-shadow: var(--body-heading-6-box-shadow, var(--text-heading-6-box-shadow, var(--body-heading-minor-box-shadow, var(--text-heading-minor-box-shadow, var(--body-heading-box-shadow, var(--text-heading-box-shadow, var(--heading-6-box-shadow, var(--heading-minor-box-shadow, var(--heading-box-shadow, none)))))))));
251
+ --_h6-font-family: var(--body-heading-6-font-family, var(--text-heading-6-font-family, var(--body-heading-minor-font-family, var(--text-heading-minor-font-family, var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-6-font-family, var(--heading-minor-font-family, var(--heading-font-family, var(--font-family, revert))))))))));
252
+ --_h6-text-transform: var(--body-heading-6-text-transform, var(--text-heading-6-text-transform, var(--body-heading-minor-text-transform, var(--text-heading-minor-text-transform, var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-6-text-transform, var(--heading-minor-text-transform, var(--heading-text-transform, var(--text-transform, revert))))))))));
253
+ --_h6-text-decoration: var(--body-heading-6-text-decoration, var(--text-heading-6-text-decoration, var(--body-heading-minor-text-decoration, var(--text-heading-minor-text-decoration, var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-6-text-decoration, var(--heading-minor-text-decoration, var(--heading-text-decoration, var(--text-decoration, revert))))))))));
254
+ --_h6-font-size: var(--body-heading-6-font-size, var(--text-heading-6-font-size, var(--body-heading-minor-font-size, var(--text-heading-minor-font-size, var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-6-font-size, var(--heading-minor-font-size, var(--heading-font-size, revert)))))))));
255
+ --_h6-font-weight: var(--body-heading-6-font-weight, var(--text-heading-6-font-weight, var(--body-heading-minor-font-weight, var(--text-heading-minor-font-weight, var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-6-font-weight, var(--heading-minor-font-weight, var(--heading-font-weight, var(--font-weight, revert))))))))));
256
+ --_h6-line-height: var(--body-heading-6-line-height, var(--text-heading-6-line-height, var(--body-heading-minor-line-height, var(--text-heading-minor-line-height, var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-6-line-height, var(--heading-minor-line-height, var(--heading-line-height, var(--line-height, revert))))))))));
257
+ --_h6-letter-spacing: var(--body-heading-6-letter-spacing, var(--text-heading-6-letter-spacing, var(--body-heading-minor-letter-spacing, var(--text-heading-minor-letter-spacing, var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-6-letter-spacing, var(--heading-minor-letter-spacing, var(--heading-letter-spacing, var(--letter-spacing, revert))))))))));
258
+ --_h6-text-indent: var(--body-heading-6-indent, var(--text-heading-6-indent, var(--body-heading-minor-indent, var(--text-heading-minor-indent, var(--body-heading-indent, var(--text-heading-indent, var(--heading-6-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))));
259
+ --_h6-font-variant: var(--body-heading-6-font-variant, var(--text-heading-6-font-variant, var(--body-heading-minor-font-variant, var(--text-heading-minor-font-variant, var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-6-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
260
+ --_h6-text-align: var(--body-heading-6-text-align, var(--text-heading-6-text-align, var(--body-heading-minor-text-align, var(--text-heading-minor-text-align, var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-6-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
336
261
  font-family: var(--body-font-family, var(--text-font-family, var(--font-family, unset)));
337
262
  text-transform: var(--body-text-transform, var(--text-text-transform, var(--text-transform, unset)));
338
263
  text-decoration: var(--body-text-decoration, var(--text-text-decoration, var(--text-decoration, unset)));
@@ -350,6 +275,10 @@ div {
350
275
  text-indent: var(--body-indent, var(--text-indent, var(--indent, unset)));
351
276
  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, unset)));
352
277
  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, unset)));
278
+ /* A prose column centres its measure; other typography containers keep
279
+ it start-aligned (see typography-container-props). */
280
+ --_prose-margin-inline: var(--body-prose-margin-inline, var(--text-prose-margin-inline, var(--prose-margin-inline, auto)));
281
+ --_heading-margin-inline: var(--body-heading-margin-inline, var(--text-heading-margin-inline, var(--heading-margin-inline, auto)));
353
282
  width: var(--text-width, var(--body-width, 100%));
354
283
  /* Not margin-props() (_box.scss): that defaults both axes to 0, but a
355
284
  TextLayout has always centred itself horizontally by default. Same
@@ -401,4 +330,277 @@ div :global(code) {
401
330
  font-variant: var(--code-font-variant, var(--font-variant, unset));
402
331
  text-align: var(--code-text-align, var(--text-align, unset));
403
332
  text-wrap: nowrap;
333
+ }
334
+
335
+ /* Everywhere else, heading styling is consumed once, globally, by the
336
+ :where()-scoped rule in vars/typography-context.css -- zero specificity, so
337
+ any real selector easily overrides it. TextLayout is the one exception:
338
+ using <TextLayout> IS the explicit request for prose styling, so it
339
+ restates the same properties here with real specificity (this rule gets
340
+ Svelte's scoping class, same as any other `div` selector in this file),
341
+ reading the SAME private vars it just set above via
342
+ typography-container-props(body, text) -- no fallback chain recomputed,
343
+ just consumed a second time by a selector that actually wins against
344
+ incidental external CSS. */
345
+ div :global(h1) {
346
+ box-sizing: border-box;
347
+ max-width: var(--_heading-max-width, revert);
348
+ margin-inline: var(--_heading-margin-inline, revert);
349
+ margin-bottom: var(--_heading-margin-bottom, revert);
350
+ margin-top: var(--_heading-margin-top, revert);
351
+ color: var(--_h1-color, revert);
352
+ background: var(--_h1-background, revert);
353
+ padding: var(--_h1-padding, revert);
354
+ border: var(--_h1-border, revert);
355
+ border-width: var(--_h1-border-width, revert);
356
+ border-style: var(--_h1-border-style, revert);
357
+ border-color: var(--_h1-border-color, revert);
358
+ border-radius: var(--_h1-border-radius, revert);
359
+ box-shadow: var(--_h1-box-shadow, revert);
360
+ font-family: var(--_h1-font-family, revert);
361
+ text-transform: var(--_h1-text-transform, revert);
362
+ text-decoration: var(--_h1-text-decoration, revert);
363
+ font-size: var(--_h1-font-size, revert);
364
+ font-weight: var(--_h1-font-weight, revert);
365
+ line-height: var(--_h1-line-height, revert);
366
+ letter-spacing: var(--_h1-letter-spacing, revert);
367
+ text-indent: var(--_h1-text-indent, revert);
368
+ font-variant: var(--_h1-font-variant, revert);
369
+ text-align: var(--_h1-text-align, revert);
370
+ }
371
+
372
+ div :global(h2) {
373
+ box-sizing: border-box;
374
+ max-width: var(--_heading-max-width, revert);
375
+ margin-inline: var(--_heading-margin-inline, revert);
376
+ margin-bottom: var(--_heading-margin-bottom, revert);
377
+ margin-top: var(--_heading-margin-top, revert);
378
+ color: var(--_h2-color, revert);
379
+ background: var(--_h2-background, revert);
380
+ padding: var(--_h2-padding, revert);
381
+ border: var(--_h2-border, revert);
382
+ border-width: var(--_h2-border-width, revert);
383
+ border-style: var(--_h2-border-style, revert);
384
+ border-color: var(--_h2-border-color, revert);
385
+ border-radius: var(--_h2-border-radius, revert);
386
+ box-shadow: var(--_h2-box-shadow, revert);
387
+ font-family: var(--_h2-font-family, revert);
388
+ text-transform: var(--_h2-text-transform, revert);
389
+ text-decoration: var(--_h2-text-decoration, revert);
390
+ font-size: var(--_h2-font-size, revert);
391
+ font-weight: var(--_h2-font-weight, revert);
392
+ line-height: var(--_h2-line-height, revert);
393
+ letter-spacing: var(--_h2-letter-spacing, revert);
394
+ text-indent: var(--_h2-text-indent, revert);
395
+ font-variant: var(--_h2-font-variant, revert);
396
+ text-align: var(--_h2-text-align, revert);
397
+ }
398
+
399
+ div :global(h3) {
400
+ box-sizing: border-box;
401
+ max-width: var(--_heading-max-width, revert);
402
+ margin-inline: var(--_heading-margin-inline, revert);
403
+ margin-bottom: var(--_heading-margin-bottom, revert);
404
+ margin-top: var(--_heading-margin-top, revert);
405
+ color: var(--_h3-color, revert);
406
+ background: var(--_h3-background, revert);
407
+ padding: var(--_h3-padding, revert);
408
+ border: var(--_h3-border, revert);
409
+ border-width: var(--_h3-border-width, revert);
410
+ border-style: var(--_h3-border-style, revert);
411
+ border-color: var(--_h3-border-color, revert);
412
+ border-radius: var(--_h3-border-radius, revert);
413
+ box-shadow: var(--_h3-box-shadow, revert);
414
+ font-family: var(--_h3-font-family, revert);
415
+ text-transform: var(--_h3-text-transform, revert);
416
+ text-decoration: var(--_h3-text-decoration, revert);
417
+ font-size: var(--_h3-font-size, revert);
418
+ font-weight: var(--_h3-font-weight, revert);
419
+ line-height: var(--_h3-line-height, revert);
420
+ letter-spacing: var(--_h3-letter-spacing, revert);
421
+ text-indent: var(--_h3-text-indent, revert);
422
+ font-variant: var(--_h3-font-variant, revert);
423
+ text-align: var(--_h3-text-align, revert);
424
+ }
425
+
426
+ div :global(h4) {
427
+ box-sizing: border-box;
428
+ max-width: var(--_heading-max-width, revert);
429
+ margin-inline: var(--_heading-margin-inline, revert);
430
+ margin-bottom: var(--_heading-margin-bottom, revert);
431
+ margin-top: var(--_heading-margin-top, revert);
432
+ color: var(--_h4-color, revert);
433
+ background: var(--_h4-background, revert);
434
+ padding: var(--_h4-padding, revert);
435
+ border: var(--_h4-border, revert);
436
+ border-width: var(--_h4-border-width, revert);
437
+ border-style: var(--_h4-border-style, revert);
438
+ border-color: var(--_h4-border-color, revert);
439
+ border-radius: var(--_h4-border-radius, revert);
440
+ box-shadow: var(--_h4-box-shadow, revert);
441
+ font-family: var(--_h4-font-family, revert);
442
+ text-transform: var(--_h4-text-transform, revert);
443
+ text-decoration: var(--_h4-text-decoration, revert);
444
+ font-size: var(--_h4-font-size, revert);
445
+ font-weight: var(--_h4-font-weight, revert);
446
+ line-height: var(--_h4-line-height, revert);
447
+ letter-spacing: var(--_h4-letter-spacing, revert);
448
+ text-indent: var(--_h4-text-indent, revert);
449
+ font-variant: var(--_h4-font-variant, revert);
450
+ text-align: var(--_h4-text-align, revert);
451
+ }
452
+
453
+ div :global(h5) {
454
+ box-sizing: border-box;
455
+ max-width: var(--_heading-max-width, revert);
456
+ margin-inline: var(--_heading-margin-inline, revert);
457
+ margin-bottom: var(--_heading-margin-bottom, revert);
458
+ margin-top: var(--_heading-margin-top, revert);
459
+ color: var(--_h5-color, revert);
460
+ background: var(--_h5-background, revert);
461
+ padding: var(--_h5-padding, revert);
462
+ border: var(--_h5-border, revert);
463
+ border-width: var(--_h5-border-width, revert);
464
+ border-style: var(--_h5-border-style, revert);
465
+ border-color: var(--_h5-border-color, revert);
466
+ border-radius: var(--_h5-border-radius, revert);
467
+ box-shadow: var(--_h5-box-shadow, revert);
468
+ font-family: var(--_h5-font-family, revert);
469
+ text-transform: var(--_h5-text-transform, revert);
470
+ text-decoration: var(--_h5-text-decoration, revert);
471
+ font-size: var(--_h5-font-size, revert);
472
+ font-weight: var(--_h5-font-weight, revert);
473
+ line-height: var(--_h5-line-height, revert);
474
+ letter-spacing: var(--_h5-letter-spacing, revert);
475
+ text-indent: var(--_h5-text-indent, revert);
476
+ font-variant: var(--_h5-font-variant, revert);
477
+ text-align: var(--_h5-text-align, revert);
478
+ }
479
+
480
+ div :global(h6) {
481
+ box-sizing: border-box;
482
+ max-width: var(--_heading-max-width, revert);
483
+ margin-inline: var(--_heading-margin-inline, revert);
484
+ margin-bottom: var(--_heading-margin-bottom, revert);
485
+ margin-top: var(--_heading-margin-top, revert);
486
+ color: var(--_h6-color, revert);
487
+ background: var(--_h6-background, revert);
488
+ padding: var(--_h6-padding, revert);
489
+ border: var(--_h6-border, revert);
490
+ border-width: var(--_h6-border-width, revert);
491
+ border-style: var(--_h6-border-style, revert);
492
+ border-color: var(--_h6-border-color, revert);
493
+ border-radius: var(--_h6-border-radius, revert);
494
+ box-shadow: var(--_h6-box-shadow, revert);
495
+ font-family: var(--_h6-font-family, revert);
496
+ text-transform: var(--_h6-text-transform, revert);
497
+ text-decoration: var(--_h6-text-decoration, revert);
498
+ font-size: var(--_h6-font-size, revert);
499
+ font-weight: var(--_h6-font-weight, revert);
500
+ line-height: var(--_h6-line-height, revert);
501
+ letter-spacing: var(--_h6-letter-spacing, revert);
502
+ text-indent: var(--_h6-text-indent, revert);
503
+ font-variant: var(--_h6-font-variant, revert);
504
+ text-align: var(--_h6-text-align, revert);
505
+ }
506
+
507
+ div :global(h1:first-child),
508
+ div :global(h2:first-child),
509
+ div :global(h3:first-child),
510
+ div :global(h4:first-child),
511
+ div :global(h5:first-child),
512
+ div :global(h6:first-child) {
513
+ margin-top: var(--_heading-first-margin-top, revert);
514
+ }
515
+
516
+ /* Same real-specificity restatement for the prose/paragraph groups, reading
517
+ the vars typography-container-props(body, text) already set above. */
518
+ div :global(p),
519
+ div :global(blockquote),
520
+ div :global(dl),
521
+ div :global(ul),
522
+ div :global(ol) {
523
+ max-width: var(--_prose-max-width, revert);
524
+ margin-inline: var(--_prose-margin-inline, revert);
525
+ font-family: var(--_prose-font-family, revert);
526
+ line-height: var(--_prose-line-height, revert);
527
+ font-weight: var(--_prose-font-weight, revert);
528
+ }
529
+
530
+ div :global(p) {
531
+ font-family: var(--_paragraph-font-family, revert);
532
+ text-transform: var(--_paragraph-text-transform, revert);
533
+ text-decoration: var(--_paragraph-text-decoration, revert);
534
+ font-size: var(--_paragraph-font-size, revert);
535
+ font-weight: var(--_paragraph-font-weight, revert);
536
+ line-height: var(--_paragraph-line-height, revert);
537
+ letter-spacing: var(--_paragraph-letter-spacing, revert);
538
+ text-indent: var(--_paragraph-text-indent, revert);
539
+ font-variant: var(--_paragraph-font-variant, revert);
540
+ text-align: var(--_paragraph-text-align, revert);
541
+ }
542
+
543
+ div :global(p:first-of-type),
544
+ div :global(h1 + p),
545
+ div :global(h2 + p),
546
+ div :global(h3 + p),
547
+ div :global(h4 + p),
548
+ div :global(h5 + p),
549
+ div :global(h6 + p) {
550
+ font-family: var(--_first-paragraph-font-family, revert);
551
+ text-transform: var(--_first-paragraph-text-transform, revert);
552
+ text-decoration: var(--_first-paragraph-text-decoration, revert);
553
+ font-weight: var(--_first-paragraph-font-weight, revert);
554
+ letter-spacing: var(--_first-paragraph-letter-spacing, revert);
555
+ text-indent: var(--_first-paragraph-text-indent, revert);
556
+ font-variant: var(--_first-paragraph-font-variant, revert);
557
+ text-align: var(--_first-paragraph-text-align, revert);
558
+ font-size: var(--_first-paragraph-font-size, revert);
559
+ line-height: var(--_first-paragraph-line-height, revert);
560
+ margin-block-start: var(--_first-paragraph-margin-top, revert);
561
+ }
562
+
563
+ div :global(p:first-of-type::first-line),
564
+ div :global(h1 + p::first-line),
565
+ div :global(h2 + p::first-line),
566
+ div :global(h3 + p::first-line),
567
+ div :global(h4 + p::first-line),
568
+ div :global(h5 + p::first-line),
569
+ div :global(h6 + p::first-line) {
570
+ font-family: var(--_first-line-font-family, revert);
571
+ text-transform: var(--_first-line-text-transform, revert);
572
+ text-decoration: var(--_first-line-text-decoration, revert);
573
+ font-size: var(--_first-line-font-size, revert);
574
+ font-weight: var(--_first-line-font-weight, revert);
575
+ line-height: var(--_first-line-line-height, revert);
576
+ letter-spacing: var(--_first-line-letter-spacing, revert);
577
+ text-indent: var(--_first-line-text-indent, revert);
578
+ font-variant: var(--_first-line-font-variant, revert);
579
+ text-align: var(--_first-line-text-align, revert);
580
+ }
581
+
582
+ div :global(p:first-of-type::first-letter),
583
+ div :global(h1 + p::first-letter),
584
+ div :global(h2 + p::first-letter),
585
+ div :global(h3 + p::first-letter),
586
+ div :global(h4 + p::first-letter),
587
+ div :global(h5 + p::first-letter),
588
+ div :global(h6 + p::first-letter) {
589
+ font-family: var(--_first-letter-font-family, revert);
590
+ text-transform: var(--_first-letter-text-transform, revert);
591
+ text-decoration: var(--_first-letter-text-decoration, revert);
592
+ font-size: var(--_first-letter-font-size, revert);
593
+ font-weight: var(--_first-letter-font-weight, revert);
594
+ line-height: var(--_first-letter-line-height, revert);
595
+ letter-spacing: var(--_first-letter-letter-spacing, revert);
596
+ text-indent: var(--_first-letter-text-indent, revert);
597
+ font-variant: var(--_first-letter-font-variant, revert);
598
+ text-align: var(--_first-letter-text-align, revert);
599
+ --link-bg: var(--_first-letter-link-bg);
600
+ --link-fg: var(--_first-letter-link-fg);
601
+ background: var(--_first-letter-background, revert);
602
+ color: var(--_first-letter-color, revert);
603
+ float: var(--first-letter-float, none);
604
+ margin-right: var(--first-letter-margin-right, 0);
605
+ padding-top: var(--first-letter-padding-top, 0);
404
606
  }</style>