@gtivr4/a1-design-system-react 0.2.3 → 0.2.4

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 (4) hide show
  1. package/guidelines/Guidelines.md +228 -0
  2. package/package.json +4 -1
  3. package/src/breakpoints.css +29 -0
  4. package/src/tokens.css +919 -0
package/guidelines/Guidelines.md ADDED
@@ -0,0 +1,228 @@
1
+ # A1 Design System — Guidelines Hub
2
+
3
+ Design system package: `@gtivr4/a1-design-system-react`
4
+
5
+ ---
6
+
7
+ ## Reading order
8
+
9
+ Always read first:
10
+ - `Guidelines.md` — this file; the main hub and entry point
11
+ - `tokens.md` — foundational design tokens (color, typography, spacing); also covers required CSS imports and theming
12
+
13
+ Read on-demand:
14
+ - `components.md` — read BEFORE using any design-system component
15
+ - `icon-discovery.md` — read BEFORE using any icons
16
+ - `styles.md` — read when building page layouts or applying custom spacing
17
+
18
+ ---
19
+
20
+ ## Companion guideline files
21
+
22
+ These files live alongside `Guidelines.md` in the `/guidelines/` directory and should be consulted for their respective focus areas when building UIs with this design system.
23
+
24
+ | File | Focus |
25
+ |---|---|
26
+ | `components.md` | Component imports, props/API surfaces, variants, composition patterns, and usage examples |
27
+ | `icon-discovery.md` | Icon naming convention, import path, available sizes, and how to search for icons |
28
+ | `tokens.md` | Design tokens, color/typography/shadow/border tokens, theming, and CSS custom properties |
29
+ | `styles.md` | Spacing scales, layout primitives, responsive patterns, and CSS methodology |
30
+ | `setup.md` | Project setup instructions, provider configuration, required CSS imports, and peer dependency requirements |
31
+
32
+ ---
33
+
34
+ ## Quick-start checklist
35
+
36
+ 1. **Install**: `pnpm add @gtivr4/a1-design-system-react`
37
+ 2. **Import CSS** at your app entry point — **all four imports are required**:
38
+ ```ts
39
+ import "@gtivr4/a1-design-system-react/tokens.css";
40
+ import "@gtivr4/a1-design-system-react/themes.css";
41
+ import "@gtivr4/a1-design-system-react/color-scheme.css";
42
+ ```
43
+ - `tokens.css` — base `:root` design tokens (spacing, shadows, radii, component dimensions, colors). **Must be first.**
44
+ - `themes.css` — theme-selector overrides (heritage, accessible, etc.).
45
+ - `color-scheme.css` — dark-mode inverse surface tokens and global box-model reset.
46
+ 3. **Load Material Symbols font** in `/src/styles/fonts.css`:
47
+ ```css
48
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
49
+ ```
50
+ 4. **Import components**:
51
+ ```ts
52
+ import { Button, Card, Heading, Paragraph } from "@gtivr4/a1-design-system-react";
53
+ ```
54
+ 5. **Optionally import spacing utilities**:
55
+ ```ts
56
+ import "@gtivr4/a1-design-system-react/utilities/spacing.css";
57
+ ```
58
+ 6. **Configure PostCSS** (required for responsive Grid, Stack breakpoints, and other components). Add a `postcss.config.mjs` at your project root:
59
+ ```js
60
+ import postcssGlobalData from "@csstools/postcss-global-data";
61
+ import postcssCustomMedia from "postcss-custom-media";
62
+ import { createRequire } from "module";
63
+ const require = createRequire(import.meta.url);
64
+ const breakpoints = require.resolve("@gtivr4/a1-design-system-react/breakpoints.css");
65
+ export default {
66
+ plugins: [
67
+ postcssGlobalData({ files: [breakpoints] }),
68
+ postcssCustomMedia(),
69
+ ],
70
+ };
71
+ ```
72
+ Install the PostCSS dependencies: `pnpm add -D postcss-custom-media @csstools/postcss-global-data`
73
+
74
+ ---
75
+
76
+ ## All exported components
77
+
78
+ Every named export from `@gtivr4/a1-design-system-react` — verified against `src/index.js`:
79
+
80
+ ### Layout
81
+
82
+ > **Always prefer these over raw `<div style={{ display: "flex" }}>` or custom CSS.** Check this table before writing any layout CSS.
83
+
84
+ | Component(s) | Notes |
85
+ |---|---|
86
+ | `Stack` | Flex column or row; `direction`, `gap`, `align`, `justify`, `wrap`, `as`. Use instead of `<div style={{ display: "flex" }}>`. |
87
+ | `Inset` | Padding wrapper; `space`, `block`, `inline`, `as`. Use instead of `<div style={{ padding: "..." }}>`. |
88
+ | `Section` | Page section with surface/padding/gradient; `padding`, `surface`, `gradient`, `contentWidth`, `height`, `inverse`, `as` |
89
+ | `Cluster` | Wrapping flex row for inline groups of elements |
90
+ | `Grid` / `GridItem` | Responsive CSS grid; `columns`, `gap` (on Grid); `span`, `rowSpan` (on GridItem) |
91
+ | `Bleed` | Negative-margin breakout for full-width elements inside constrained content |
92
+ | `Spacer` | Empty space block; `size` |
93
+ | `Inverse` | Activates dark/inverted color context on its subtree without changing the global theme |
94
+ | `PageLayout` | Full-page shell; `header`, `footer`, `sidebar`, `sidebarPlacement`, `stickyHeader` |
95
+ | `ButtonContainer` | Aligns a row of buttons; `align="start\|center\|end"` |
96
+ | `Figure` | Captioned media wrapper; `caption`, `ratio` |
97
+
98
+ ### Actions
99
+
100
+ | Component(s) | Notes |
101
+ |---|---|
102
+ | `Button` | `variant="primary\|secondary\|tertiary\|destructive\|success"`, `size="sm\|md\|lg"`, `icon`, `iconPosition`, `as` |
103
+ | `IconButton` | Icon-only button; requires `label` (aria); `icon`, `variant`, `size`, `disabled` |
104
+ | `Switch` | Toggle switch; `checked`, `onChange`, `label`, `disabled` |
105
+
106
+ ### Navigation
107
+
108
+ | Component(s) | Notes |
109
+ |---|---|
110
+ | `TopHeader` | App header with nav and actions; `logoText`, `logo`, `logoHref`, `navItems`, `actions`, `loginButton`. Do not hand-roll a header — use this. |
111
+ | `SideNav` / `SideNavItem` / `SideNavGroup` | Collapsible sidebar; supports controlled and uncontrolled group state |
112
+ | `Tabs` / `TabList` / `Tab` / `TabPanel` | Controlled; `value`, `onChange`, `variant`, `level` |
113
+ | `Breadcrumb` | `items` array with `label` and `href` |
114
+ | `PageNav` | In-page anchor navigation |
115
+ | `Pagination` | Controlled; `page`, `totalPages`, `onChange`, `siblings`, `size` |
116
+ | `SegmentedControl` | Controlled radio group; `options`, `value`, `onChange`, `fullWidth` |
117
+ | `Link` | `as`, `size`, `weight`, `icon`, `iconPosition` |
118
+
119
+ ### Inputs
120
+
121
+ > Do not use raw `<input>`, `<select>`, or `<textarea>` elements. Always use the field components below.
122
+
123
+ | Component(s) | Notes |
124
+ |---|---|
125
+ | `TextField` | Text, email, search, password, number, etc.; `label`, `hint`, `error`, `size`, `required`, `disabled`, `readOnly`, `type` |
126
+ | `SelectField` | Dropdown select; `label`, `hint`, `error`, `options`, `size`, `required` |
127
+ | `TextareaField` | Multi-line text; `label`, `hint`, `error`, `size`, `required` |
128
+ | `CheckboxGroup` | Group of checkboxes; `legend`, `options`, `value`, `onChange`, `size` |
129
+ | `RadioGroup` | Group of radio buttons; `legend`, `options`, `value`, `onChange`, `size` |
130
+ | `Fieldset` | Groups related fields with a legend; `legend`, `size`, `labelPosition` |
131
+ | `FieldRow` | Lays out fields horizontally |
132
+ | `DateField` | Date input with formatting |
133
+ | `NumberField` | Numeric input with formatting |
134
+ | `PhoneField` | US phone number with mask |
135
+ | `ZipField` | ZIP code with mask |
136
+ | `CreditCardField` | Credit card number with mask |
137
+ | `TimeField` | Time input |
138
+ | `InlineEditable` | Click-to-edit text field |
139
+
140
+ ### Typography
141
+
142
+ | Component(s) | Notes |
143
+ |---|---|
144
+ | `Heading` | `as`, `type="heading\|display"`, `size`, `color`, `align`, `margin` |
145
+ | `Paragraph` | `as`, `size`, `color`, `align` |
146
+ | `Blockquote` | Styled quotation block |
147
+ | `List` / `ListItem` | `List`: `variant="unordered\|ordered\|icon\|divider"`, `size`, `color`, `icon`. `ListItem`: `icon` (overrides list icon). Always use these instead of raw `<ul>/<li>`. |
148
+ | `Code` | Inline or block code; `variant="inline\|block"`, `wrapping`, `copyCode` |
149
+ | `Divider` | Horizontal rule |
150
+ | `Icon` | Material Symbols ligature; `name`, `fill`, `weight`, `grade`, `opticalSize`. Verify icon names in `icon-discovery.md` — never guess. |
151
+
152
+ ### Feedback
153
+
154
+ | Component(s) | Notes |
155
+ |---|---|
156
+ | `Banner` | Inline status banner; `status`, `title`, `icon`, `onDismiss` |
157
+ | `MessageBadge` | Inline status chip; `status="neutral\|info\|success\|warn\|error"`, `subtle` (boolean), `size`, `icon`. Note: `subtle` is a boolean prop — do not use `variant="subtle"`. |
158
+ | `MessageEmptyState` | Empty state block; `scale="page\|section\|card"`, `icon`, `title`, `description`, `action` |
159
+ | `Notification` | Badge wrapper; `count`, `label`, `dot`, `variant`, `position`, `max` |
160
+ | `Snackbar` | Toast notification; `open`, `onClose`, `message`, `action` |
161
+ | `SystemBanner` | Full-width system alert; `status`, `title`, `message`, `onDismiss` |
162
+
163
+ ### Overlay
164
+
165
+ | Component(s) | Notes |
166
+ |---|---|
167
+ | `Dialog` | Native `<dialog>`; `open`, `onClose`, `title`, `footer` |
168
+ | `Menu` / `MenuSection` / `MenuItem` | Dropdown menu; `open`, `onClose`, `aria-label` on Menu; `icon`, `href`, `variant`, `onClick` on MenuItem |
169
+
170
+ ### Data and disclosure
171
+
172
+ | Component(s) | Notes |
173
+ |---|---|
174
+ | `DataTable` / `DataTableFilters` | Tabular data with sorting and filtering |
175
+ | `Calendar` | Date display; `variant="scroll\|paginated"`, `initialMonth`, `monthsToShow`, `highlightToday`, `dimPast` |
176
+ | `Accordion` | Disclosure component; `items` with `title` and `content` |
177
+
178
+ ### Utility
179
+
180
+ | Component(s) | Notes |
181
+ |---|---|
182
+ | `LabelsProvider` / `useLabel` | i18n/brand label resolution; wrap at app root |
183
+
184
+ ---
185
+
186
+ ## Before using a component
187
+
188
+ 1. Check `components.md` for the component's import path, props, and variants.
189
+ 2. Use the component's own props (`variant`, `size`, `icon`, etc.) rather than overriding its CSS classes.
190
+ 3. Use `--semantic-color-*` and `--base-spacing-*` CSS custom properties for any surrounding custom styles.
191
+
192
+ ---
193
+
194
+ ## Before using an icon
195
+
196
+ 1. Check `icon-discovery.md` for available icons.
197
+ 2. Do NOT guess icon names — verify the icon exists first.
198
+ 3. If an icon doesn't exist, pick a different one and verify.
199
+
200
+ ---
201
+
202
+ ## Theming
203
+
204
+ | Class on `<html>` | Effect |
205
+ |---|---|
206
+ | (none) | Default A1 light theme |
207
+ | `.a1-theme-dark` | Global dark mode |
208
+ | `.a1-theme-light` | Force light mode (inside dark) |
209
+ | `.a1-theme-heritage` | Warm neutral / editorial theme |
210
+ | `.a1-theme-accessible` | Larger sizes, filled icons |
211
+
212
+ Wrap any section in `<Inverse>` to render it in the inverted (dark) color context without changing the global theme.
213
+
214
+ ---
215
+
216
+ ## Key rules
217
+
218
+ - **Use layout components before custom CSS.** Before writing `display: flex`, `display: grid`, `gap`, or `padding` as inline styles, check `Stack`, `Inset`, `Section`, `Cluster`, `Grid`, and `PageLayout` first. Custom layout CSS is a last resort.
219
+ - **Never use raw `<input>`, `<select>`, `<textarea>`, `<ul>`, or `<li>`.** Always use the corresponding design-system component.
220
+ - **Never shadow a design-system import with a local function of the same name.** If you need a custom header, name it `AppHeader`, not `TopHeader`.
221
+ - Always check `components.md` before creating any UI element — use the design-system component if one exists.
222
+ - Use `--semantic-color-*` tokens for color; never hard-code hex values.
223
+ - Use `--base-spacing-{n}` tokens for spacing; stick to the defined scale.
224
+ - Icons use Material Symbols ligature names (snake_case strings). Never invent names — always verify in `icon-discovery.md`.
225
+ - The `Heading` component supports `type="heading"` and `type="display"` — choose the right scale.
226
+ - `Dialog` and `Menu` use the native `<dialog>` element; always provide `open` + `onClose`.
227
+ - `PageLayout` is the correct shell for full-page layouts — don't hand-roll header/sidebar/footer structure.
228
+ - `MessageBadge` uses `subtle` (a boolean prop), not `variant="subtle"`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gtivr4/a1-design-system-react",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "description": "React components for the A1 token-driven design system.",
5
5
  "type": "module",
6
6
  "main": "./src/index.js",
@@ -15,6 +15,7 @@
15
15
  ],
16
16
  "files": [
17
17
  "README.md",
18
+ "guidelines/**/*.md",
18
19
  "src/**/*.css",
19
20
  "src/**/*.jsx",
20
21
  "src/index.js",
@@ -26,7 +27,9 @@
26
27
  ],
27
28
  "exports": {
28
29
  ".": "./src/index.js",
30
+ "./tokens.css": "./src/tokens.css",
29
31
  "./themes.css": "./src/themes.css",
32
+ "./breakpoints.css": "./src/breakpoints.css",
30
33
  "./color-scheme.css": "./src/color-scheme.css",
31
34
  "./utilities/spacing.css": "./src/utilities/spacing.css",
32
35
  "./components/*": "./src/components/*"
package/src/breakpoints.css ADDED
@@ -0,0 +1,29 @@
1
+ /* ─── Breakpoints ─────────────────────────────────────────────────────────────
2
+ Generated from system/tokens/breakpoint.json via Style Dictionary.
3
+ @custom-media rules follow the CSS Media Queries Level 5 draft.
4
+ Use postcss-custom-media to expand these at build time, or reference
5
+ the --breakpoint-* CSS custom properties in JavaScript.
6
+ ─────────────────────────────────────────────────────────────────────────── */
7
+
8
+ /* XS — up to 480px */
9
+ @custom-media --bp-xs (max-width: 480px);
10
+ @custom-media --bp-xs-down (max-width: 480px);
11
+
12
+ /* SM — 481px – 640px */
13
+ @custom-media --bp-sm (min-width: 481px) and (max-width: 640px);
14
+ @custom-media --bp-sm-up (min-width: 481px);
15
+ @custom-media --bp-sm-down (max-width: 640px);
16
+
17
+ /* MD — 641px – 1024px */
18
+ @custom-media --bp-md (min-width: 641px) and (max-width: 1024px);
19
+ @custom-media --bp-md-up (min-width: 641px);
20
+ @custom-media --bp-md-down (max-width: 1024px);
21
+
22
+ /* LG — 1025px – 1440px */
23
+ @custom-media --bp-lg (min-width: 1025px) and (max-width: 1440px);
24
+ @custom-media --bp-lg-up (min-width: 1025px);
25
+ @custom-media --bp-lg-down (max-width: 1440px);
26
+
27
+ /* XL — 1441px and above */
28
+ @custom-media --bp-xl (min-width: 1441px);
29
+ @custom-media --bp-xl-up (min-width: 1441px);
package/src/tokens.css ADDED
@@ -0,0 +1,919 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --breakpoint-xs-max: 480px;
7
+ --breakpoint-sm-min: 481px;
8
+ --breakpoint-sm-max: 640px;
9
+ --breakpoint-md-min: 641px;
10
+ --breakpoint-md-max: 1024px;
11
+ --breakpoint-lg-min: 1025px;
12
+ --breakpoint-lg-max: 1440px;
13
+ --breakpoint-xl-min: 1441px;
14
+ --base-color-neutral-0: #ffffff;
15
+ --base-color-neutral-50: #f0f6fe;
16
+ --base-color-neutral-100: #e1e8f3;
17
+ --base-color-neutral-200: #c8d2e0;
18
+ --base-color-neutral-300: #a6b2c4;
19
+ --base-color-neutral-400: #8290a5;
20
+ --base-color-neutral-500: #64748b;
21
+ --base-color-neutral-600: #414e61;
22
+ --base-color-neutral-700: #293343;
23
+ --base-color-neutral-800: #151d29;
24
+ --base-color-neutral-900: #060b14;
25
+ --base-color-neutral-1000: #000000;
26
+ --base-color-accent-0: #fcfbff;
27
+ --base-color-accent-50: #f5f3ff;
28
+ --base-color-accent-100: #e8e4ff;
29
+ --base-color-accent-200: #d2c8ff;
30
+ --base-color-accent-300: #b5a0ff;
31
+ --base-color-accent-400: #986eff;
32
+ --base-color-accent-500: #7c3aed;
33
+ --base-color-accent-600: #5916b5;
34
+ --base-color-accent-700: #3d0082;
35
+ --base-color-accent-800: #230051;
36
+ --base-color-accent-900: #0f002a;
37
+ --base-color-accent-1000: #010003;
38
+ --base-color-highlited-0: #fffef2;
39
+ --base-color-highlited-50: #fffbd1;
40
+ --base-color-highlited-100: #fff7a3;
41
+ --base-color-highlited-200: #fff066;
42
+ --base-color-highlited-300: #ffe22e;
43
+ --base-color-highlited-400: #ffc914;
44
+ --base-color-highlited-500: #e3ad00;
45
+ --base-color-highlited-600: #ad8100;
46
+ --base-color-highlited-700: #765700;
47
+ --base-color-highlited-800: #4a3500;
48
+ --base-color-highlited-900: #241900;
49
+ --base-color-highlited-1000: #070400;
50
+ --base-color-info-0: #fafcff;
51
+ --base-color-info-50: #f0f5ff;
52
+ --base-color-info-100: #dce8ff;
53
+ --base-color-info-200: #b9d2ff;
54
+ --base-color-info-300: #87b0ff;
55
+ --base-color-info-400: #5189fd;
56
+ --base-color-info-500: #2563eb;
57
+ --base-color-info-600: #0b3fb2;
58
+ --base-color-info-700: #002582;
59
+ --base-color-info-800: #001451;
60
+ --base-color-info-900: #00062a;
61
+ --base-color-info-1000: #000003;
62
+ --base-color-error-0: #fffbfa;
63
+ --base-color-error-50: #fff2f0;
64
+ --base-color-error-100: #ffe0db;
65
+ --base-color-error-200: #ffbfb6;
66
+ --base-color-error-300: #ff8b7e;
67
+ --base-color-error-400: #ea574d;
68
+ --base-color-error-500: #dc2626;
69
+ --base-color-error-600: #94000b;
70
+ --base-color-error-700: #660005;
71
+ --base-color-error-800: #3e0002;
72
+ --base-color-error-900: #1f0000;
73
+ --base-color-error-1000: #020000;
74
+ --base-color-warn-0: #fffbf8;
75
+ --base-color-warn-50: #fff3ea;
76
+ --base-color-warn-100: #ffe2cc;
77
+ --base-color-warn-200: #fdc498;
78
+ --base-color-warn-300: #e59f68;
79
+ --base-color-warn-400: #ca782e;
80
+ --base-color-warn-500: #d97706;
81
+ --base-color-warn-600: #743d00;
82
+ --base-color-warn-700: #4f2700;
83
+ --base-color-warn-800: #2f1500;
84
+ --base-color-warn-900: #160700;
85
+ --base-color-warn-1000: #010000;
86
+ --base-color-success-0: #f5fff6;
87
+ --base-color-success-50: #dfffe4;
88
+ --base-color-success-100: #c9f5d0;
89
+ --base-color-success-200: #a6e3b0;
90
+ --base-color-success-300: #78c687;
91
+ --base-color-success-400: #42a75c;
92
+ --base-color-success-500: #16a34a;
93
+ --base-color-success-600: #005e26;
94
+ --base-color-success-700: #003f17;
95
+ --base-color-success-800: #00250a;
96
+ --base-color-success-900: #001003;
97
+ --base-color-success-1000: #000100;
98
+ --base-radius-sm: 4px;
99
+ --base-radius-md: 6px;
100
+ --base-radius-control: 6px;
101
+ --base-radius-lg: 8px;
102
+ --base-radius-xl: 12px;
103
+ --base-space-button-padding-block: 10px;
104
+ --base-space-button-padding-inline: 12px;
105
+ --base-space-button-min-height: 40px;
106
+ --base-space-button-gap: 0.5rem;
107
+ --base-space-button-border-width: 0px;
108
+ --base-space-button-focus-ring-width: 3px;
109
+ --base-space-button-focus-ring-offset: 2px;
110
+ --base-space-button-disabled-opacity: 0.55;
111
+ --base-space-card-padding: 20px;
112
+ --base-space-card-border-width: 1px;
113
+ --base-shadow-100: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
114
+ --base-shadow-200: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
115
+ --base-shadow-300: 0px 4px 6px -1px rgba(6, 11, 20, 0.10), 0px 2px 4px -2px rgba(6, 11, 20, 0.06);
116
+ --base-shadow-400: 0px 10px 15px -3px rgba(6, 11, 20, 0.10), 0px 4px 6px -4px rgba(6, 11, 20, 0.05);
117
+ --base-shadow-500: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
118
+ --base-spacing-1: 1px;
119
+ --base-spacing-2: 2px;
120
+ --base-spacing-4: 4px;
121
+ --base-spacing-6: 6px;
122
+ --base-spacing-8: 8px;
123
+ --base-spacing-12: 12px;
124
+ --base-spacing-16: 16px;
125
+ --base-spacing-20: 20px;
126
+ --base-spacing-24: 24px;
127
+ --base-spacing-32: 32px;
128
+ --base-spacing-40: 40px;
129
+ --base-spacing-64: 64px;
130
+ --base-spacing-96: 96px;
131
+ --base-spacing-128: 128px;
132
+ --base-spacing-neg-4: -4px;
133
+ --base-spacing-neg-8: -8px;
134
+ --base-spacing-neg-12: -12px;
135
+ --base-spacing-neg-16: -16px;
136
+ --base-spacing-neg-20: -20px;
137
+ --base-spacing-neg-24: -24px;
138
+ --base-spacing-neg-32: -32px;
139
+ --base-icon-optical-size: 24;
140
+ --base-font-size-root: 1rem;
141
+ --base-font-size-user-small: 0.875rem;
142
+ --base-font-size-user-medium: 1rem;
143
+ --base-font-size-user-large: 1.125rem;
144
+ --base-font-size-user-xl: 1.25rem;
145
+ --base-font-size-scale-100: 0.75rem;
146
+ --base-font-size-scale-150: 0.875rem;
147
+ --base-font-size-scale-200: 1rem;
148
+ --base-font-size-scale-250: 1.125rem;
149
+ --base-font-size-scale-300: 1.25rem;
150
+ --base-font-size-scale-400: 1.5rem;
151
+ --base-font-size-scale-500: 1.75rem;
152
+ --base-font-size-scale-600: 2rem;
153
+ --base-font-size-scale-700: 2.5rem;
154
+ --base-font-size-scale-800: 3.5rem;
155
+ --base-font-size-scale-900: 4.5rem;
156
+ --base-font-size-scale-1000: 6rem;
157
+ --base-font-size-accessible-scale-100: 0.84375rem;
158
+ --base-font-size-accessible-scale-150: 0.984375rem;
159
+ --base-font-size-accessible-scale-200: 1.125rem;
160
+ --base-font-size-accessible-scale-250: 1.265625rem;
161
+ --base-font-size-accessible-scale-300: 1.40625rem;
162
+ --base-font-size-accessible-scale-400: 1.6875rem;
163
+ --base-font-size-accessible-scale-500: 1.96875rem;
164
+ --base-font-size-accessible-scale-600: 2.25rem;
165
+ --base-font-size-accessible-scale-700: 2.8125rem;
166
+ --base-font-size-accessible-scale-800: 3.9375rem;
167
+ --base-font-size-accessible-scale-900: 5.0625rem;
168
+ --base-font-size-accessible-scale-1000: 6.75rem;
169
+ --base-font-weight-regular: 400;
170
+ --base-font-weight-medium: 500;
171
+ --base-font-weight-semibold: 600;
172
+ --base-font-weight-bold: 700;
173
+ --base-font-weight-extra-bold: 900;
174
+ --base-font-line-height-body: 1.5em;
175
+ --base-font-line-height-heading: 1.25em;
176
+ --base-font-line-height-display: 1.125em;
177
+ --semantic-color-text-default: #060b14;
178
+ --semantic-color-text-muted: #64748b;
179
+ --semantic-color-text-inverse: #ffffff;
180
+ --semantic-color-text-accent: #7c3aed;
181
+ --semantic-color-surface-page: #ffffff;
182
+ --semantic-color-surface-panel: #f0f6fe;
183
+ --semantic-color-surface-raised: #e1e8f3;
184
+ --semantic-color-surface-inverse: #060b14;
185
+ --semantic-color-border-subtle: #c8d2e0;
186
+ --semantic-color-border-default: #a6b2c4;
187
+ --semantic-color-border-strong: #64748b;
188
+ --semantic-color-action-background: #7c3aed;
189
+ --semantic-color-action-background-hover: #5916b5;
190
+ --semantic-color-action-background-pressed: #230051;
191
+ --semantic-color-action-foreground: #e8e4ff;
192
+ --semantic-color-action-foreground-pressed: #b5a0ff;
193
+ --semantic-color-action-surface: #f5f3ff;
194
+ --semantic-color-action-border: #b5a0ff;
195
+ --semantic-color-status-info-background: #2563eb;
196
+ --semantic-color-status-info-surface: #f0f5ff;
197
+ --semantic-color-status-info-border: #87b0ff;
198
+ --semantic-color-status-info-foreground: #fafcff;
199
+ --semantic-color-status-error-background: #dc2626;
200
+ --semantic-color-status-error-surface: #fff2f0;
201
+ --semantic-color-status-error-border: #ff8b7e;
202
+ --semantic-color-status-error-foreground: #fffbfa;
203
+ --semantic-color-status-error-text: #660005; /** Error-colored text or icon on a neutral surface. Darker than background to meet 4.5:1. */
204
+ --semantic-color-status-warn-background: #4f2700;
205
+ --semantic-color-status-warn-surface: #fff3ea;
206
+ --semantic-color-status-warn-border: #e59f68;
207
+ --semantic-color-status-warn-foreground: #fffbf8;
208
+ --semantic-color-status-warn-text: #4f2700; /** Warn-colored text or icon on a neutral surface. Darker than background to meet 4.5:1. */
209
+ --semantic-color-status-success-background: #003f17;
210
+ --semantic-color-status-success-surface: #dfffe4;
211
+ --semantic-color-status-success-border: #78c687;
212
+ --semantic-color-status-success-foreground: #f5fff6;
213
+ --semantic-radius-control: 6px;
214
+ --semantic-motion-duration-instant: 0ms;
215
+ --semantic-motion-duration-quick: 100ms;
216
+ --semantic-motion-duration-fast: 150ms;
217
+ --semantic-motion-duration-normal: 200ms;
218
+ --semantic-motion-duration-slow: 300ms;
219
+ --semantic-motion-duration-slower: 500ms;
220
+ --semantic-motion-duration-slowest: 750ms;
221
+ --semantic-motion-easing-linear: linear;
222
+ --semantic-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
223
+ --semantic-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
224
+ --semantic-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
225
+ --semantic-motion-easing-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
226
+ --semantic-motion-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
227
+ --semantic-shadow-xs: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
228
+ --semantic-shadow-sm: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
229
+ --semantic-shadow-md: 0px 4px 6px -1px rgba(6, 11, 20, 0.10), 0px 2px 4px -2px rgba(6, 11, 20, 0.06);
230
+ --semantic-shadow-lg: 0px 10px 15px -3px rgba(6, 11, 20, 0.10), 0px 4px 6px -4px rgba(6, 11, 20, 0.05);
231
+ --semantic-shadow-xl: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
232
+ --semantic-spacing-gap-xs: 8px;
233
+ --semantic-spacing-gap-sm: 12px;
234
+ --semantic-spacing-gap-md: 16px;
235
+ --semantic-spacing-gap-lg: 24px;
236
+ --semantic-font-size-body-xs: 0.75rem;
237
+ --semantic-font-size-body-sm: 0.875rem;
238
+ --semantic-font-size-body-md: 1rem;
239
+ --semantic-font-size-body-lg: 1.125rem;
240
+ --semantic-font-size-body-xl: 1.25rem;
241
+ --semantic-font-size-heading-xxl: 2.5rem;
242
+ --semantic-font-size-heading-xl: 2rem;
243
+ --semantic-font-size-heading-lg: 1.75rem;
244
+ --semantic-font-size-heading-md: 1.5rem;
245
+ --semantic-font-size-heading-sm: 1.25rem;
246
+ --semantic-font-size-heading-xs: 1.125rem;
247
+ --semantic-font-size-display-sm: 1.5rem;
248
+ --semantic-font-size-display-md: 1.75rem;
249
+ --semantic-font-size-display-lg: 2rem;
250
+ --semantic-font-size-display-xl: 2.5rem;
251
+ --semantic-font-size-display-xxl: 3.5rem;
252
+ --semantic-font-size-display-jumbo: 4.5rem;
253
+ --semantic-font-size-display-x-jumbo: 6rem;
254
+ --semantic-font-weight-body: 400;
255
+ --semantic-font-weight-heading: 700;
256
+ --semantic-font-weight-display: 900;
257
+ --semantic-font-line-height-body: 1.5em;
258
+ --semantic-font-line-height-heading: 1.25em;
259
+ --semantic-font-line-height-display: 1.125em;
260
+ --component-button-primary-background: #7c3aed;
261
+ --component-button-primary-background-hover: #5916b5;
262
+ --component-button-primary-background-pressed: #230051;
263
+ --component-button-primary-foreground: #fcfbff;
264
+ --component-button-primary-foreground-hover: #f5f3ff;
265
+ --component-button-primary-foreground-pressed: #e8e4ff;
266
+ --component-button-primary-border: #7c3aed;
267
+ --component-button-primary-border-width: 0px;
268
+ --component-button-secondary-background: #fcfbff;
269
+ --component-button-secondary-background-hover: #f5f3ff;
270
+ --component-button-secondary-background-pressed: #e8e4ff;
271
+ --component-button-secondary-foreground: #5916b5;
272
+ --component-button-secondary-foreground-hover: #3d0082;
273
+ --component-button-secondary-foreground-pressed: #230051;
274
+ --component-button-secondary-border: #7c3aed;
275
+ --component-button-secondary-border-hover: #3d0082;
276
+ --component-button-secondary-border-pressed: #230051;
277
+ --component-button-secondary-border-width: 1px;
278
+ --component-button-tertiary-background: #fcfbff;
279
+ --component-button-tertiary-background-hover: #f5f3ff;
280
+ --component-button-tertiary-background-pressed: #e8e4ff;
281
+ --component-button-tertiary-foreground: #5916b5;
282
+ --component-button-tertiary-foreground-hover: #3d0082;
283
+ --component-button-tertiary-foreground-pressed: #230051;
284
+ --component-button-tertiary-border: #fcfbff;
285
+ --component-button-tertiary-border-hover: #f5f3ff;
286
+ --component-button-tertiary-border-pressed: #e8e4ff;
287
+ --component-button-tertiary-border-width: 1px;
288
+ --component-button-focus-ring: #b5a0ff;
289
+ --component-button-border-radius: 6px;
290
+ --component-button-pill-border-radius: 9999px;
291
+ --component-button-padding-block: 10px;
292
+ --component-button-padding-inline: 12px;
293
+ --component-button-min-height: 40px;
294
+ --component-button-gap: 0.5rem;
295
+ --component-button-border-width: 0px;
296
+ --component-button-focus-ring-width: 3px;
297
+ --component-button-focus-ring-offset: 2px;
298
+ --component-button-disabled-opacity: 0.55;
299
+ --component-button-icon-size: 20px;
300
+ --component-button-icon-optical-size: 20;
301
+ --component-button-small-height: 28px;
302
+ --component-button-small-border-radius: 4px;
303
+ --component-button-small-icon-size: 20px;
304
+ --component-button-small-icon-optical-size: 20;
305
+ --component-button-medium-icon-size: 24px;
306
+ --component-button-medium-icon-optical-size: 24;
307
+ --component-button-large-height: 56px;
308
+ --component-button-large-secondary-border-width: 2px;
309
+ --component-button-large-icon-size: 40px;
310
+ --component-button-large-icon-optical-size: 40;
311
+ --component-button-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
312
+ --component-button-font-size: 1rem;
313
+ --component-button-font-weight: 500;
314
+ --component-button-font-line-height: normal;
315
+ --component-accordion-trigger-height-sm: 32px;
316
+ --component-accordion-trigger-height-md: 40px;
317
+ --component-accordion-trigger-height-lg: 52px;
318
+ --component-accordion-padding-inline-sm: 8px;
319
+ --component-accordion-padding-inline-md: 12px;
320
+ --component-accordion-padding-inline-lg: 16px;
321
+ --component-accordion-icon-size-sm: 18px;
322
+ --component-accordion-icon-size-md: 20px;
323
+ --component-accordion-icon-size-lg: 24px;
324
+ --component-accordion-border-radius: 6px;
325
+ --component-accordion-focus-ring-width: 2px;
326
+ --component-accordion-focus-ring-offset: -2px;
327
+ --component-blockquote-border-width: 4px;
328
+ --component-blockquote-border-radius: 8px;
329
+ --component-blockquote-padding-block: 20px;
330
+ --component-blockquote-padding-inline: 24px;
331
+ --component-blockquote-mark-size: 5rem;
332
+ --component-blockquote-cite-font-weight: 500;
333
+ --component-calendar-month-gap: 32px;
334
+ --component-calendar-heading-padding-block: 12px;
335
+ --component-calendar-heading-padding-block-compact: 8px;
336
+ --component-calendar-heading-gap: 8px;
337
+ --component-calendar-cell-padding: 4px;
338
+ --component-calendar-cell-padding-compact: 2px;
339
+ --component-calendar-cell-padding-minimal: 1px;
340
+ --component-calendar-cell-size: 32px;
341
+ --component-calendar-cell-size-compact: 24px;
342
+ --component-calendar-cell-border-radius: 4px;
343
+ --component-card-padding: 20px;
344
+ --component-card-border-radius: 8px;
345
+ --component-card-border-width: 1px;
346
+ --component-card-icon-size: 20px;
347
+ --component-card-icon-optical-size: 20;
348
+ --component-card-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
349
+ --component-card-title-font-size: 1.25rem;
350
+ --component-card-title-font-weight: 700;
351
+ --component-card-title-font-line-height: 1.25em;
352
+ --component-card-body-font-size: 1rem;
353
+ --component-card-body-font-weight: 400;
354
+ --component-card-body-font-line-height: 1.5em;
355
+ --component-checkbox-group-box-size: 16px;
356
+ --component-checkbox-group-gap: 8px;
357
+ --component-checkbox-group-item-gap: 2px;
358
+ --component-checkbox-group-group-gap: 8px;
359
+ --component-checkbox-group-items-top-gap: 12px;
360
+ --component-checkbox-group-input-nudge: 4px;
361
+ --component-checkbox-group-row-padding-block: 4px;
362
+ --component-checkbox-group-row-padding-inline: 6px;
363
+ --component-checkbox-group-content-gap: 2px;
364
+ --component-checkbox-group-icon-size: 75%;
365
+ --component-checkbox-group-disabled-opacity: 0.6;
366
+ --component-checkbox-group-error-accent-width: 3px;
367
+ --component-checkbox-group-error-message-font-weight: 600;
368
+ --component-checkbox-group-comfortable-box-size: 20px;
369
+ --component-checkbox-group-comfortable-box-size-md: 22px;
370
+ --component-checkbox-group-comfortable-gap: 10px;
371
+ --component-checkbox-group-comfortable-item-gap: 2px;
372
+ --component-checkbox-group-comfortable-group-gap: 10px;
373
+ --component-checkbox-group-comfortable-items-top-gap: 16px;
374
+ --component-checkbox-group-comfortable-input-nudge: 2px;
375
+ --component-checkbox-group-comfortable-row-padding-block: 6px;
376
+ --component-checkbox-group-comfortable-row-padding-inline: 8px;
377
+ --component-checkbox-group-compact-box-size: 14px;
378
+ --component-checkbox-group-compact-gap: 6px;
379
+ --component-checkbox-group-compact-item-gap: 2px;
380
+ --component-checkbox-group-compact-group-gap: 4px;
381
+ --component-checkbox-group-compact-items-top-gap: 8px;
382
+ --component-checkbox-group-compact-input-nudge: 3px;
383
+ --component-checkbox-group-compact-row-padding-block: 2px;
384
+ --component-checkbox-group-compact-row-padding-inline: 4px;
385
+ --component-data-table-border-width: 1px;
386
+ --component-data-table-header-font-weight: 500;
387
+ --component-data-table-focus-ring-width: 2px;
388
+ --component-data-table-focus-ring-offset: -1px;
389
+ --component-data-table-density-compact-cell-padding-block: 6px;
390
+ --component-data-table-density-compact-cell-padding-inline: 12px;
391
+ --component-data-table-density-compact-font-size: 0.75rem;
392
+ --component-data-table-density-default-cell-padding-block: 12px;
393
+ --component-data-table-density-default-cell-padding-inline: 16px;
394
+ --component-data-table-density-default-font-size: 0.875rem;
395
+ --component-data-table-density-comfortable-cell-padding-block: 20px;
396
+ --component-data-table-density-comfortable-cell-padding-inline: 20px;
397
+ --component-data-table-density-comfortable-font-size: 0.875rem;
398
+ --component-dialog-padding: 24px;
399
+ --component-dialog-border-radius: 12px;
400
+ --component-dialog-border-width: 1px;
401
+ --component-dialog-shadow: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
402
+ --component-dialog-close-offset: -4px;
403
+ --component-dialog-footer-border-width: 1px;
404
+ --component-dialog-width: 560px;
405
+ --component-divider-size-xs: 1px;
406
+ --component-divider-size-sm: 2px;
407
+ --component-divider-size-md: 3px;
408
+ --component-divider-size-lg: 4px;
409
+ --component-field-border-width: 1px;
410
+ --component-field-required-border-width: 8px;
411
+ --component-field-error-border-width: 2px;
412
+ --component-field-label-font-weight: 600;
413
+ --component-field-focus-ring-color: #b5a0ff;
414
+ --component-field-focus-ring-width: 3px;
415
+ --component-field-focus-ring-offset: 2px;
416
+ --component-field-hover-background: #f0f6fe;
417
+ --component-field-hover-border-color: #414e61;
418
+ --component-field-active-background: #e1e8f3;
419
+ --component-field-active-border-color: #293343;
420
+ --component-field-read-only-background: #f0f5ff;
421
+ --component-field-read-only-border-color: #b9d2ff;
422
+ --component-field-read-only-text: #000003;
423
+ --component-field-comfortable-height: 52px;
424
+ --component-field-comfortable-padding-inline: 16px;
425
+ --component-field-comfortable-gap: 8px;
426
+ --component-field-comfortable-border-radius: 8px;
427
+ --component-field-default-height: 40px;
428
+ --component-field-default-padding-inline: 12px;
429
+ --component-field-default-gap: 6px;
430
+ --component-field-default-border-radius: 6px;
431
+ --component-field-compact-height: 32px;
432
+ --component-field-compact-padding-inline: 8px;
433
+ --component-field-compact-gap: 4px;
434
+ --component-field-compact-border-radius: 4px;
435
+ --component-field-chevron-size: 20px;
436
+ --component-field-chevron-size-comfortable: 24px;
437
+ --component-field-chevron-size-compact: 16px;
438
+ --component-field-side-label-width: minmax(100px, 160px);
439
+ --component-field-side-label-width-comfortable: minmax(120px, 200px);
440
+ --component-field-accent-compensation: 7px;
441
+ --component-field-accent-compensation-compact: 3px;
442
+ --component-field-compact-label-font-weight: 500;
443
+ --component-field-compact-accent-border-width: 4px;
444
+ --component-field-textarea-padding-block: 10px;
445
+ --component-field-textarea-padding-block-comfortable: 14px;
446
+ --component-field-textarea-padding-block-compact: 6px;
447
+ --component-field-credit-card-badge-font-weight: 600;
448
+ --component-field-credit-card-badge-border-width: 1px;
449
+ --component-field-credit-card-badge-padding-block: 2px;
450
+ --component-field-credit-card-badge-padding-inline: 6px;
451
+ --component-field-credit-card-badge-min-width: 40px;
452
+ --component-field-credit-card-badge-line-height: 1.4;
453
+ --component-field-credit-card-detected-offset: 52px;
454
+ --component-heading-mark-highlight-background-color: #fff066;
455
+ --component-heading-mark-highlight-foreground-color: #060b14;
456
+ --component-heading-mark-highlight-font-weight: 900;
457
+ --component-heading-mark-highlight-padding-block: 0.02em;
458
+ --component-heading-mark-highlight-padding-inline: 0.14em;
459
+ --component-heading-mark-highlight-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
460
+ --component-heading-mark-underline-color: #5916b5;
461
+ --component-heading-mark-underline-height: 0.32em;
462
+ --component-heading-mark-underline-offset: -0.16em;
463
+ --component-heading-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
464
+ --component-heading-font-family-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
465
+ --component-heading-font-weight-heading: 700;
466
+ --component-heading-font-weight-display: 900;
467
+ --component-heading-font-line-height-heading: 1.25em;
468
+ --component-heading-font-line-height-display: 1.125em;
469
+ --component-icon-button-size: 40px;
470
+ --component-icon-button-icon-size: 24px;
471
+ --component-icon-button-border-radius: 6px;
472
+ --component-icon-button-icon-optical-size: 24;
473
+ --component-icon-button-focus-ring-width: 2px;
474
+ --component-icon-button-focus-ring-offset: 1px;
475
+ --component-inline-padding-block: 0.1em;
476
+ --component-inline-padding-inline: 0.35em;
477
+ --component-inline-kbd-padding-inline: 0.4em;
478
+ --component-inline-border-radius: 0.2em;
479
+ --component-inline-code-font-size: 0.875em;
480
+ --component-inline-emphasis-font-weight: 500;
481
+ --component-inline-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
482
+ --component-link-color: #2563eb;
483
+ --component-link-color-hover: #0b3fb2;
484
+ --component-link-color-pressed: #002582;
485
+ --component-link-focus-ring-width: 2px;
486
+ --component-link-focus-ring-offset: 2px;
487
+ --component-link-focus-ring-radius: 2px;
488
+ --component-link-underline-offset: 0.2em;
489
+ --component-link-icon-gap: 0.25em;
490
+ --component-menu-width: 260px;
491
+ --component-menu-viewport-offset: 16px;
492
+ --component-menu-border-width: 1px;
493
+ --component-menu-section-label-font-weight: 700;
494
+ --component-menu-item-font-weight: 400;
495
+ --component-menu-item-line-height: 1.5;
496
+ --component-menu-item-focus-ring-width: 3px;
497
+ --component-menu-item-focus-ring-offset: -2px;
498
+ --component-menu-item-disabled-opacity: 0.4;
499
+ --component-menu-item-icon-size: 18px;
500
+ --component-menu-mobile-max-height: 80dvh;
501
+ --component-message-banner-padding: 12px;
502
+ --component-message-banner-border-radius: 8px;
503
+ --component-message-banner-border-width: 1px;
504
+ --component-message-banner-icon-size: 20px;
505
+ --component-message-banner-icon-margin-top: 1px;
506
+ --component-message-banner-icon-optical-size: 20;
507
+ --component-message-banner-title-font-weight: 600;
508
+ --component-message-banner-dismiss-size: 24px;
509
+ --component-message-banner-dismiss-offset: -2px;
510
+ --component-message-banner-focus-ring-width: 2px;
511
+ --component-message-banner-focus-ring-offset: 1px;
512
+ --component-message-banner-system-max-width: 1280px;
513
+ --component-message-badge-padding-block: 4px;
514
+ --component-message-badge-padding-inline: 8px;
515
+ --component-message-badge-border-radius: 6px;
516
+ --component-message-badge-font-weight: 500;
517
+ --component-message-badge-border-width: 1px;
518
+ --component-message-badge-line-height: 1;
519
+ --component-message-badge-icon-size: 1em;
520
+ --component-message-badge-sm-padding-block: 2px;
521
+ --component-message-badge-sm-padding-inline: 6px;
522
+ --component-message-badge-lg-padding-block: 8px;
523
+ --component-message-badge-lg-padding-inline: 12px;
524
+ --component-message-empty-state-icon-size-page: 48px;
525
+ --component-message-empty-state-icon-size-section: 28px;
526
+ --component-message-empty-state-icon-size-card: 20px;
527
+ --component-message-empty-state-icon-optical-size-page: 48;
528
+ --component-message-empty-state-icon-optical-size-section: 28;
529
+ --component-message-empty-state-icon-optical-size-card: 20;
530
+ --component-message-empty-state-wrap-size-page: 88px;
531
+ --component-message-empty-state-wrap-size-section: 56px;
532
+ --component-message-empty-state-wrap-size-card: 36px;
533
+ --component-message-empty-state-max-width-page: 480px;
534
+ --component-message-empty-state-max-width-section: 360px;
535
+ --component-notification-height: 18px;
536
+ --component-notification-dot-size: 8px;
537
+ --component-notification-padding-inline: 5px;
538
+ --component-notification-font-size: 11px;
539
+ --component-notification-font-weight: 600;
540
+ --component-notification-ring-width: 2px;
541
+ --component-page-layout-sidebar-width: 280px;
542
+ --component-page-layout-gap: 24px;
543
+ --component-pagination-item-size: 36px;
544
+ --component-pagination-item-size-sm: 28px;
545
+ --component-pagination-gap: 4px;
546
+ --component-pagination-border-width: 1px;
547
+ --component-pagination-font-weight-default: 400;
548
+ --component-pagination-font-weight-active: 500;
549
+ --component-pagination-focus-ring-width: 2px;
550
+ --component-pagination-focus-ring-offset: 2px;
551
+ --component-pagination-disabled-opacity: 0.35;
552
+ --component-pagination-ellipsis-padding-bottom: 4px;
553
+ --component-radio-group-control-size: 16px;
554
+ --component-radio-group-gap: 8px;
555
+ --component-radio-group-item-gap: 2px;
556
+ --component-radio-group-group-gap: 8px;
557
+ --component-radio-group-items-top-gap: 12px;
558
+ --component-radio-group-input-nudge: 4px;
559
+ --component-radio-group-row-padding-block: 4px;
560
+ --component-radio-group-row-padding-inline: 6px;
561
+ --component-radio-group-content-gap: 2px;
562
+ --component-radio-group-dot-size: 40%;
563
+ --component-radio-group-error-accent-width: 3px;
564
+ --component-radio-group-error-message-font-weight: 600;
565
+ --component-radio-group-comfortable-control-size: 20px;
566
+ --component-radio-group-comfortable-control-size-md: 22px;
567
+ --component-radio-group-comfortable-gap: 10px;
568
+ --component-radio-group-comfortable-item-gap: 2px;
569
+ --component-radio-group-comfortable-group-gap: 10px;
570
+ --component-radio-group-comfortable-items-top-gap: 16px;
571
+ --component-radio-group-comfortable-input-nudge: 2px;
572
+ --component-radio-group-comfortable-row-padding-block: 6px;
573
+ --component-radio-group-comfortable-row-padding-inline: 8px;
574
+ --component-radio-group-compact-control-size: 14px;
575
+ --component-radio-group-compact-gap: 6px;
576
+ --component-radio-group-compact-item-gap: 2px;
577
+ --component-radio-group-compact-group-gap: 4px;
578
+ --component-radio-group-compact-items-top-gap: 8px;
579
+ --component-radio-group-compact-input-nudge: 3px;
580
+ --component-radio-group-compact-row-padding-block: 2px;
581
+ --component-radio-group-compact-row-padding-inline: 4px;
582
+ --component-scrim-color: rgba(15, 0, 42, 0.6);
583
+ --component-scrim-color-dark: rgba(181, 160, 255, 0.6);
584
+ --component-scrim-blur: 2px;
585
+ --component-section-gradient-edge-width: 78%;
586
+ --component-section-gradient-edge-height: 62%;
587
+ --component-section-gradient-center-width: 68%;
588
+ --component-section-gradient-center-height: 76%;
589
+ --component-section-gradient-strength: 24;
590
+ --component-section-gradient-strength-inverse: 18;
591
+ --component-section-gradient-fade: 72;
592
+ --component-segmented-padding: 3px;
593
+ --component-segmented-gap: 2px;
594
+ --component-segmented-segment-padding-block: 4px;
595
+ --component-segmented-segment-padding-inline: 12px;
596
+ --component-segmented-segment-padding-block-sm: 2px;
597
+ --component-segmented-segment-padding-inline-sm: 8px;
598
+ --component-segmented-border-width: 1px;
599
+ --component-segmented-font-weight-default: 400;
600
+ --component-segmented-font-weight-active: 500;
601
+ --component-segmented-focus-ring-width: 2px;
602
+ --component-segmented-focus-ring-offset: -2px;
603
+ --component-side-nav-width: 280px;
604
+ --component-side-nav-padding-block: 8px;
605
+ --component-side-nav-padding-inline: 8px;
606
+ --component-side-nav-border-width: 1px;
607
+ --component-side-nav-header-min-height: 52px;
608
+ --component-side-nav-collapsed-width: 52px;
609
+ --component-side-nav-overlay-z-index: 200;
610
+ --component-side-nav-overlay-shadow-start: 8px 0 40px rgba(0, 0, 0, 0.18);
611
+ --component-side-nav-overlay-shadow-end: -8px 0 40px rgba(0, 0, 0, 0.18);
612
+ --component-side-nav-item-height: 36px;
613
+ --component-side-nav-item-padding-inline: 8px;
614
+ --component-side-nav-item-gap: 8px;
615
+ --component-side-nav-item-border-radius: 6px;
616
+ --component-side-nav-item-icon-size: 20px;
617
+ --component-side-nav-item-indent: 20px;
618
+ --component-side-nav-item-focus-ring-width: 3px;
619
+ --component-side-nav-item-focus-ring-offset: -2px;
620
+ --component-side-nav-item-font-line-height: 1.5;
621
+ --component-side-nav-item-active-font-weight: 500;
622
+ --component-side-nav-item-chevron-size: 18px;
623
+ --component-switch-track-width: 40px;
624
+ --component-switch-track-height: 22px;
625
+ --component-switch-thumb-size: 16px;
626
+ --component-switch-gap: 3px;
627
+ --component-switch-row-gap: 6px;
628
+ --component-switch-row-padding-block: 4px;
629
+ --component-switch-row-padding-inline: 6px;
630
+ --component-switch-content-gap: 1px;
631
+ --component-switch-group-gap: 4px;
632
+ --component-switch-thumb-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
633
+ --component-switch-message-error-font-weight: 600;
634
+ --component-switch-accessible-icon-size: 60%;
635
+ --component-switch-comfortable-track-width: 56px;
636
+ --component-switch-comfortable-track-height: 28px;
637
+ --component-switch-comfortable-thumb-size: 20px;
638
+ --component-switch-comfortable-gap: 4px;
639
+ --component-switch-comfortable-row-gap: 8px;
640
+ --component-switch-comfortable-row-padding-block: 6px;
641
+ --component-switch-comfortable-row-padding-inline: 8px;
642
+ --component-switch-comfortable-content-gap: 2px;
643
+ --component-switch-comfortable-group-gap: 6px;
644
+ --component-switch-compact-track-width: 32px;
645
+ --component-switch-compact-track-height: 18px;
646
+ --component-switch-compact-thumb-size: 12px;
647
+ --component-switch-compact-gap: 3px;
648
+ --component-switch-compact-row-gap: 4px;
649
+ --component-switch-compact-row-padding-block: 2px;
650
+ --component-switch-compact-row-padding-inline: 4px;
651
+ --component-switch-compact-content-gap: 1px;
652
+ --component-switch-compact-group-gap: 2px;
653
+ --component-tab-padding-block: 8px;
654
+ --component-tab-padding-inline: 16px;
655
+ --component-tab-padding-block-sm: 4px;
656
+ --component-tab-padding-inline-sm: 12px;
657
+ --component-tab-indicator-size: 2px;
658
+ --component-tab-border-width: 1px;
659
+ --component-tab-font-weight-default: 400;
660
+ --component-tab-font-weight-active: 500;
661
+ --component-tab-focus-ring-width: 2px;
662
+ --component-tab-focus-ring-offset: -2px;
663
+ --component-tab-z-index-active: 1;
664
+ --component-tab-margin-bottom: -1px;
665
+ --component-tab-scroll-button-width: 32px;
666
+ --component-tab-scroll-button-icon-size: 20px;
667
+ --component-tab-icon-size: 1.1em;
668
+ --component-tab-icon-above-size: 1.5em;
669
+ --component-tab-count-min-width: 18px;
670
+ --component-tab-count-height: 18px;
671
+ --component-tab-count-padding-inline: 5px;
672
+ --component-tab-count-border-radius: 999px;
673
+ --component-tab-count-font-size: 11px;
674
+ --component-tab-count-line-height: 1;
675
+ --component-tab-folder-curve-adjustment: 0.5px;
676
+ --component-tab-progress-step-size: 24px;
677
+ --component-tab-progress-step-size-md: 32px;
678
+ --component-tab-progress-line-height: 2px;
679
+ --component-tab-progress-step-font-size: 0.75rem;
680
+ --component-tab-progress-step-border-width: 2px;
681
+ --component-tab-progress-completed-icon-size: 16px;
682
+ --component-tab-progress-selected-ring: 0 0 0 3px color-mix(in srgb, var(--semantic-color-action-background) 25%, transparent);
683
+ --component-top-header-height: 64px;
684
+ --component-top-header-padding-inline: 24px;
685
+ --component-top-header-border-width: 1px;
686
+ --component-top-header-z-index: 100;
687
+ --component-paragraph-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
688
+ --component-paragraph-font-weight: 400;
689
+ --component-paragraph-font-line-height: 1.75em;
690
+ --brand-a1-color-primary: #7c3aed;
691
+ --brand-a1-color-neutral: #64748b;
692
+ --brand-a1-color-accent: #7c3aed;
693
+ --brand-a1-color-info: #2563eb;
694
+ --brand-a1-color-error: #dc2626;
695
+ --brand-a1-color-warn: #d97706;
696
+ --brand-a1-color-success: #16a34a;
697
+ --brand-a1-button-primary-background: #7c3aed;
698
+ --brand-a1-button-primary-background-hover: #5916b5;
699
+ --brand-a1-button-primary-background-pressed: #230051;
700
+ --brand-a1-button-primary-foreground: #fcfbff;
701
+ --brand-a1-button-primary-foreground-hover: #f5f3ff;
702
+ --brand-a1-button-primary-foreground-pressed: #e8e4ff;
703
+ --brand-a1-button-primary-border: #7c3aed;
704
+ --brand-a1-button-secondary-background: #fcfbff;
705
+ --brand-a1-button-secondary-background-hover: #f5f3ff;
706
+ --brand-a1-button-secondary-background-pressed: #e8e4ff;
707
+ --brand-a1-button-secondary-foreground: #5916b5;
708
+ --brand-a1-button-secondary-foreground-hover: #3d0082;
709
+ --brand-a1-button-secondary-foreground-pressed: #230051;
710
+ --brand-a1-button-secondary-border: #7c3aed;
711
+ --brand-a1-button-secondary-border-hover: #3d0082;
712
+ --brand-a1-button-secondary-border-pressed: #230051;
713
+ --brand-a1-button-tertiary-background: #fcfbff;
714
+ --brand-a1-button-tertiary-background-hover: #f5f3ff;
715
+ --brand-a1-button-tertiary-background-pressed: #e8e4ff;
716
+ --brand-a1-button-tertiary-foreground: #5916b5;
717
+ --brand-a1-button-tertiary-foreground-hover: #3d0082;
718
+ --brand-a1-button-tertiary-foreground-pressed: #230051;
719
+ --brand-a1-button-tertiary-border: #fcfbff;
720
+ --brand-a1-button-tertiary-border-hover: #f5f3ff;
721
+ --brand-a1-button-tertiary-border-pressed: #e8e4ff;
722
+ --brand-a1-button-focus-ring: #b5a0ff;
723
+ --brand-a1-font-size-body-xs: 0.75rem;
724
+ --brand-a1-font-size-body-sm: 0.875rem;
725
+ --brand-a1-font-size-body-md: 1rem;
726
+ --brand-a1-font-size-body-lg: 1.125rem;
727
+ --brand-a1-font-size-body-xl: 1.25rem;
728
+ --brand-a1-font-size-heading-xxl: 2.5rem;
729
+ --brand-a1-font-size-heading-xl: 2rem;
730
+ --brand-a1-font-size-heading-lg: 1.75rem;
731
+ --brand-a1-font-size-heading-md: 1.5rem;
732
+ --brand-a1-font-size-heading-sm: 1.25rem;
733
+ --brand-a1-font-size-heading-xs: 1.125rem;
734
+ --brand-a1-font-size-display-sm: 1.5rem;
735
+ --brand-a1-font-size-display-md: 1.75rem;
736
+ --brand-a1-font-size-display-lg: 2rem;
737
+ --brand-a1-font-size-display-xl: 2.5rem;
738
+ --brand-a1-font-size-display-xxl: 3.5rem;
739
+ --brand-a1-font-size-display-jumbo: 4.5rem;
740
+ --brand-a1-font-size-display-x-jumbo: 6rem;
741
+ --brand-a1-font-weight-body: 400;
742
+ --brand-a1-font-weight-heading: 700;
743
+ --brand-a1-font-weight-display: 900;
744
+ --brand-a1-font-line-height-body: 1.5em;
745
+ --brand-a1-font-line-height-heading: 1.25em;
746
+ --brand-a1-font-line-height-display: 1.125em;
747
+ --container-query-compact-min: 0px;
748
+ --container-query-compact-max: 480px;
749
+ --container-query-standard-min: 480px;
750
+ --theme-a1-light-button-primary-border-width: 0px;
751
+ --theme-a1-light-button-primary-background: #7c3aed;
752
+ --theme-a1-light-button-primary-background-hover: #5916b5;
753
+ --theme-a1-light-button-primary-background-pressed: #230051;
754
+ --theme-a1-light-button-primary-foreground: #fcfbff;
755
+ --theme-a1-light-button-primary-foreground-pressed: #e8e4ff;
756
+ --theme-a1-light-button-primary-border: #7c3aed;
757
+ --theme-a1-light-button-secondary-border-width: 1px;
758
+ --theme-a1-light-button-secondary-background: #fcfbff;
759
+ --theme-a1-light-button-secondary-background-hover: #f5f3ff;
760
+ --theme-a1-light-button-secondary-background-pressed: #e8e4ff;
761
+ --theme-a1-light-button-secondary-foreground: #5916b5;
762
+ --theme-a1-light-button-secondary-foreground-hover: #3d0082;
763
+ --theme-a1-light-button-secondary-foreground-pressed: #230051;
764
+ --theme-a1-light-button-secondary-border: #7c3aed;
765
+ --theme-a1-light-button-secondary-border-hover: #3d0082;
766
+ --theme-a1-light-button-secondary-border-pressed: #230051;
767
+ --theme-a1-light-button-tertiary-border-width: 1px;
768
+ --theme-a1-light-button-tertiary-background: #fcfbff;
769
+ --theme-a1-light-button-tertiary-background-hover: #f5f3ff;
770
+ --theme-a1-light-button-tertiary-background-pressed: #e8e4ff;
771
+ --theme-a1-light-button-tertiary-foreground: #5916b5;
772
+ --theme-a1-light-button-tertiary-foreground-hover: #3d0082;
773
+ --theme-a1-light-button-tertiary-foreground-pressed: #230051;
774
+ --theme-a1-light-button-tertiary-border: #fcfbff;
775
+ --theme-a1-light-button-tertiary-border-hover: #f5f3ff;
776
+ --theme-a1-light-button-tertiary-border-pressed: #e8e4ff;
777
+ --theme-a1-light-button-border-radius: 6px;
778
+ --theme-a1-light-button-padding-block: 10px;
779
+ --theme-a1-light-button-padding-inline: 12px;
780
+ --theme-a1-light-button-min-height: 40px;
781
+ --theme-a1-light-button-gap: 0.5rem;
782
+ --theme-a1-light-button-border-width: 0px;
783
+ --theme-a1-light-button-focus-ring-width: 3px;
784
+ --theme-a1-light-button-focus-ring-offset: 2px;
785
+ --theme-a1-light-button-disabled-opacity: 0.55;
786
+ --theme-a1-light-button-focus-ring: #b5a0ff;
787
+ --theme-a1-light-color-text-default: #060b14;
788
+ --theme-a1-light-color-text-muted: #64748b;
789
+ --theme-a1-light-color-text-inverse: #ffffff;
790
+ --theme-a1-light-color-surface-page: #ffffff;
791
+ --theme-a1-light-color-surface-panel: #f0f6fe;
792
+ --theme-a1-light-color-surface-raised: #e1e8f3;
793
+ --theme-a1-light-color-border-subtle: #c8d2e0;
794
+ --theme-a1-light-color-border-default: #a6b2c4;
795
+ --theme-a1-light-color-border-strong: #64748b;
796
+ --theme-a1-light-color-action-background: #7c3aed;
797
+ --theme-a1-light-color-action-background-hover: #5916b5;
798
+ --theme-a1-light-color-action-background-pressed: #230051;
799
+ --theme-a1-light-color-action-foreground: #e8e4ff;
800
+ --theme-a1-light-color-action-foreground-pressed: #b5a0ff;
801
+ --theme-a1-light-color-action-surface: #f5f3ff;
802
+ --theme-a1-light-color-action-border: #b5a0ff;
803
+ --theme-a1-light-color-status-info-background: #2563eb;
804
+ --theme-a1-light-color-status-info-surface: #f0f5ff;
805
+ --theme-a1-light-color-status-info-border: #87b0ff;
806
+ --theme-a1-light-color-status-info-foreground: #fafcff;
807
+ --theme-a1-light-color-status-error-background: #dc2626;
808
+ --theme-a1-light-color-status-error-surface: #fff2f0;
809
+ --theme-a1-light-color-status-error-border: #ff8b7e;
810
+ --theme-a1-light-color-status-error-foreground: #fffbfa;
811
+ --theme-a1-light-color-status-warn-background: #4f2700;
812
+ --theme-a1-light-color-status-warn-surface: #fff3ea;
813
+ --theme-a1-light-color-status-warn-border: #e59f68;
814
+ --theme-a1-light-color-status-warn-foreground: #fffbf8;
815
+ --theme-a1-light-color-status-success-background: #003f17;
816
+ --theme-a1-light-color-status-success-surface: #dfffe4;
817
+ --theme-a1-light-color-status-success-border: #78c687;
818
+ --theme-a1-light-color-status-success-foreground: #f5fff6;
819
+ --theme-a1-light-font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
820
+ --theme-a1-light-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
821
+ --theme-a1-light-font-family-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
822
+ --theme-a1-light-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
823
+ --theme-a1-light-font-size-body-xs: 0.75rem;
824
+ --theme-a1-light-font-size-body-sm: 0.875rem;
825
+ --theme-a1-light-font-size-body-md: 1rem;
826
+ --theme-a1-light-font-size-body-lg: 1.125rem;
827
+ --theme-a1-light-font-size-body-xl: 1.25rem;
828
+ --theme-a1-light-font-size-heading-xl: 2rem;
829
+ --theme-a1-light-font-size-heading-lg: 1.75rem;
830
+ --theme-a1-light-font-size-heading-md: 1.5rem;
831
+ --theme-a1-light-font-size-heading-sm: 1.25rem;
832
+ --theme-a1-light-font-size-heading-xs: 1.125rem;
833
+ --theme-a1-light-font-size-display-sm: 1.5rem;
834
+ --theme-a1-light-font-size-display-md: 1.75rem;
835
+ --theme-a1-light-font-size-display-lg: 2rem;
836
+ --theme-a1-light-font-size-display-xl: 2.5rem;
837
+ --theme-a1-light-font-size-display-xxl: 3.5rem;
838
+ --theme-a1-light-font-size-display-jumbo: 4.5rem;
839
+ --theme-a1-light-font-size-display-x-jumbo: 6rem;
840
+ --theme-a1-light-font-weight-body: 400;
841
+ --theme-a1-light-font-weight-heading: 700;
842
+ --theme-a1-light-font-weight-display: 900;
843
+ --theme-a1-light-font-line-height-body: 1.5em;
844
+ --theme-a1-light-font-line-height-heading: 1.25em;
845
+ --theme-a1-light-font-line-height-display: 1.125em;
846
+ --theme-a1-light-font-user-size-small: 0.875rem;
847
+ --theme-a1-light-font-user-size-medium: 1rem;
848
+ --theme-a1-light-font-user-size-large: 1.125rem;
849
+ --theme-a1-light-font-user-size-xl: 1.25rem;
850
+ --theme-a1-accessible-font-family-body: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
851
+ --theme-a1-accessible-font-family-heading: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
852
+ --theme-a1-accessible-font-family-display: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
853
+ --theme-a1-accessible-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
854
+ --theme-a1-accessible-font-size-body-xs: 0.84375rem;
855
+ --theme-a1-accessible-font-size-body-sm: 0.984375rem;
856
+ --theme-a1-accessible-font-size-body-md: 1.125rem;
857
+ --theme-a1-accessible-font-size-body-lg: 1.265625rem;
858
+ --theme-a1-accessible-font-size-body-xl: 1.40625rem;
859
+ --theme-a1-accessible-font-size-heading-xl: 2.25rem;
860
+ --theme-a1-accessible-font-size-heading-lg: 1.96875rem;
861
+ --theme-a1-accessible-font-size-heading-md: 1.6875rem;
862
+ --theme-a1-accessible-font-size-heading-sm: 1.40625rem;
863
+ --theme-a1-accessible-font-size-heading-xs: 1.265625rem;
864
+ --theme-a1-accessible-font-size-display-sm: 1.6875rem;
865
+ --theme-a1-accessible-font-size-display-md: 1.96875rem;
866
+ --theme-a1-accessible-font-size-display-lg: 2.25rem;
867
+ --theme-a1-accessible-font-size-display-xl: 2.8125rem;
868
+ --theme-a1-accessible-font-size-display-xxl: 3.9375rem;
869
+ --theme-a1-accessible-font-size-display-jumbo: 5.0625rem;
870
+ --theme-a1-accessible-font-size-display-x-jumbo: 6.75rem;
871
+ --theme-a1-accessible-font-weight-body: 400;
872
+ --theme-a1-accessible-font-weight-heading: 700;
873
+ --theme-a1-accessible-font-weight-display: 900;
874
+ --theme-a1-accessible-font-line-height-body: 1.5em;
875
+ --theme-a1-accessible-font-line-height-heading: 1.25em;
876
+ --theme-a1-accessible-font-line-height-display: 1.125em;
877
+ --theme-a1-accessible-font-user-size-small: 0.875rem;
878
+ --theme-a1-accessible-font-user-size-medium: 1rem;
879
+ --theme-a1-accessible-font-user-size-large: 1.125rem;
880
+ --theme-a1-accessible-font-user-size-xl: 1.25rem;
881
+ --theme-a1-catlympics-font-family-body: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
882
+ --theme-a1-catlympics-font-family-heading: 'Patrick Hand SC', system-ui, -apple-system, sans-serif;
883
+ --theme-a1-catlympics-font-family-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
884
+ --theme-a1-catlympics-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
885
+ --theme-a1-catlympics-font-weight-body: 400;
886
+ --theme-a1-catlympics-font-weight-heading: 400;
887
+ --theme-a1-catlympics-font-weight-display: 700;
888
+ --theme-a1-heritage-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
889
+ --theme-a1-heritage-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
890
+ --theme-a1-heritage-font-family-display: 'Roboto Slab', Rockwell, Clarendon, Georgia, serif;
891
+ --theme-a1-heritage-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
892
+ --theme-a1-heritage-font-size-body-xs: 0.75rem;
893
+ --theme-a1-heritage-font-size-body-sm: 0.875rem;
894
+ --theme-a1-heritage-font-size-body-md: 1rem;
895
+ --theme-a1-heritage-font-size-body-lg: 1.125rem;
896
+ --theme-a1-heritage-font-size-body-xl: 1.25rem;
897
+ --theme-a1-heritage-font-size-heading-xl: 2rem;
898
+ --theme-a1-heritage-font-size-heading-lg: 1.75rem;
899
+ --theme-a1-heritage-font-size-heading-md: 1.5rem;
900
+ --theme-a1-heritage-font-size-heading-sm: 1.25rem;
901
+ --theme-a1-heritage-font-size-heading-xs: 1.125rem;
902
+ --theme-a1-heritage-font-size-display-sm: 1.5rem;
903
+ --theme-a1-heritage-font-size-display-md: 1.75rem;
904
+ --theme-a1-heritage-font-size-display-lg: 2rem;
905
+ --theme-a1-heritage-font-size-display-xl: 2.5rem;
906
+ --theme-a1-heritage-font-size-display-xxl: 3.5rem;
907
+ --theme-a1-heritage-font-size-display-jumbo: 4.5rem;
908
+ --theme-a1-heritage-font-size-display-x-jumbo: 6rem;
909
+ --theme-a1-heritage-font-weight-body: 400;
910
+ --theme-a1-heritage-font-weight-heading: 400;
911
+ --theme-a1-heritage-font-weight-display: 300;
912
+ --theme-a1-heritage-font-line-height-body: 1.5em;
913
+ --theme-a1-heritage-font-line-height-heading: 1.25em;
914
+ --theme-a1-heritage-font-line-height-display: 1.125em;
915
+ --theme-a1-heritage-font-user-size-small: 0.875rem;
916
+ --theme-a1-heritage-font-user-size-medium: 1rem;
917
+ --theme-a1-heritage-font-user-size-large: 1.125rem;
918
+ --theme-a1-heritage-font-user-size-xl: 1.25rem;
919
+ }