/* -------------------------------------------------------------------------
* Houza design system — tokens (autogenerated). DO NOT EDIT.
* Source: tokens/core + tokens/surfaces (Terrazzo, console + display passes)
* + Web Awesome base theme (bundled) + tokens/bridge-wa.css
* + tokens/static.css
* ------------------------------------------------------------------------- */
/* -------------------------------------------
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
* ------------------------------------------- */
:root {
/* interactive/brand accent — active nav, primary action fill, selection edge. Never status: ember is warn-only. */
--hz-accent: var(--hz-ion-base);
/* accent text on dark — links, active-nav label, selected-row emphasis */
--hz-accent-bright: var(--hz-ion-bright);
/* quiet accent structure — ghost-button border, link underline */
--hz-accent-deep: var(--hz-ion-deep);
/* selection fill — selected row / active list item background */
--hz-accent-wash: var(--hz-ion-wash);
--hz-amber: rgb(90.98% 69.412% 29.02%);
--hz-amber-bright: rgb(92.941% 75.294% 41.569%);
--hz-amber-deep: rgb(90.98% 63.529% 24.314%);
--hz-amber-meter: rgb(82.353% 63.529% 29.02%);
--hz-bone-50: rgb(90.588% 89.804% 87.451%);
--hz-bone-100: rgb(96.863% 94.51% 90.98%);
--hz-bone-150: rgb(95.294% 92.941% 88.627%);
--hz-bone-200: rgb(91.373% 89.412% 85.49%);
--hz-bone-250: rgb(89.412% 86.667% 81.176%);
--hz-bone-300: rgb(79.608% 77.255% 72.941%);
--hz-bone-350: rgb(72.157% 69.412% 65.098%);
--hz-bone-400: rgb(63.922% 61.569% 57.255%);
--hz-bone-450: rgb(60.392% 58.431% 54.902%);
--hz-bone-500: rgb(54.118% 52.157% 48.235%);
--hz-bone-600: rgb(43.529% 41.569% 38.039%);
--hz-bone-700: rgb(35.686% 33.725% 30.588%);
--hz-bone-750: rgb(30.98% 29.02% 26.275%);
--hz-border-width-host: 3px;
--hz-border-width-rail: 4px;
/* surface background */
--hz-canvas: var(--hz-neutral-850);
/* card body background */
--hz-card-surface: var(--hz-neutral-950);
--hz-device-h: 480px;
--hz-device-w: 960px;
--hz-ember: rgb(89.804% 30.98% 15.686%);
--hz-ember-bright: rgb(93.725% 43.529% 28.235%);
--hz-ember-deep: rgb(87.059% 29.02% 12.549%);
--hz-ember-edge: rgb(72.157% 20% 5.882%);
--hz-ember-ink: rgb(16.471% 5.098% 1.961%);
--hz-ember-ink-soft: rgb(29.02% 10.98% 5.49%);
--hz-face-display: "Oxanium", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
--hz-face-lcd: "Digital-7 Mono", "DSEG7 Classic", monospace;
--hz-face-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
--hz-face-sans: "Geist", "Inter", -apple-system, system-ui, sans-serif;
--hz-face-sans-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
--hz-flux-base: oklch(70% 0.21 350);
--hz-flux-bright: oklch(76.66% 0.1706 347.3);
--hz-flux-deep: oklch(55% 0.19 350);
--hz-flux-on: oklch(18% 0.04 350);
--hz-flux-soft: oklch(93.33% 0.0427 344.3);
--hz-flux-wash: oklch(27% 0.07 350);
/* host names, labels, body */
--hz-font-display: var(--hz-face-display);
/* hero numerals (load, uptime) */
--hz-font-lcd: var(--hz-face-lcd);
/* all metrics & data */
--hz-font-mono: var(--hz-face-mono);
--hz-fs-base: 14px;
--hz-fs-data: 15px;
--hz-fs-display: 44px;
--hz-fs-host: 21px;
--hz-fs-md: 16px;
--hz-fs-micro: 8px;
--hz-fs-mini: 10px;
--hz-fs-rail: 13px;
--hz-fs-sm: 12px;
--hz-fs-tiny: 9px;
--hz-fs-title: 28px;
--hz-fs-xs: 11px;
/* success — shared across surfaces */
--hz-healthy: var(--hz-mint);
/* success — shared across surfaces */
--hz-healthy-text: var(--hz-mint-bright);
--hz-host-idle: var(--hz-spruce);
--hz-indigo-base: oklch(55% 0.15 262);
--hz-indigo-dark: oklch(70% 0.15 262);
--hz-indigo-ink: oklch(42% 0.12 262);
--hz-indigo-on: oklch(100% 0 0);
--hz-indigo-soft: oklch(95.36% 0.0224 255.5);
--hz-ink-820: rgb(10.196% 9.412% 7.451%);
--hz-ink-870: rgb(8.235% 7.843% 5.882%);
--hz-ink-900: rgb(6.275% 5.49% 4.706%);
--hz-ink-950: rgb(4.706% 4.314% 3.922%);
--hz-ink-grad-hi: rgb(11.373% 10.588% 8.627%);
--hz-ink-grad-lo: rgb(6.275% 5.882% 4.706%);
--hz-ion-base: oklch(71.23% 0.1721 297.2);
--hz-ion-bright: oklch(78.36% 0.1259 297.4);
--hz-ion-deep: oklch(56% 0.17 295);
--hz-ion-on: oklch(19% 0.03 295);
--hz-ion-soft: oklch(93.64% 0.0354 299.3);
--hz-ion-wash: oklch(28% 0.07 295);
--hz-lh-loose: 1.6;
--hz-lh-normal: 1.3;
--hz-lh-open: 1.5;
--hz-lh-relaxed: 1.4;
--hz-lh-single: 1;
--hz-lh-snug: 1.2;
--hz-lh-tight: 1.1;
--hz-meter-warn: var(--hz-amber-meter);
--hz-mint: rgb(37.255% 75.294% 54.118%);
--hz-mint-bright: rgb(43.529% 77.255% 58.824%);
--hz-neutral-0: oklch(100% 0 0);
--hz-neutral-25: oklch(98.5% 0.004 95);
--hz-neutral-50: oklch(96.5% 0.005 95);
--hz-neutral-100: oklch(93.5% 0.006 92);
--hz-neutral-200: oklch(87.5% 0.008 90);
--hz-neutral-300: oklch(80.5% 0.009 90);
--hz-neutral-400: oklch(71.5% 0.011 92);
--hz-neutral-500: oklch(62% 0.009 92);
--hz-neutral-600: oklch(52% 0.009 92);
--hz-neutral-700: oklch(43% 0.008 92);
--hz-neutral-800: oklch(33% 0.01 90);
--hz-neutral-850: oklch(27% 0.011 90);
--hz-neutral-900: oklch(22% 0.011 90);
--hz-neutral-950: oklch(18% 0.01 90);
--hz-neutral-975: oklch(15% 0.008 80);
/* text on solid accent fill (dark ink — console accent is bright) */
--hz-on-accent: var(--hz-ion-on);
/* error/destructive — shared across surfaces */
--hz-on-warn: var(--hz-ember-ink);
--hz-on-warn-soft: var(--hz-ember-ink-soft);
/* flat dark page background */
--hz-page-dark: var(--hz-ink-870);
/* light gallery / spec background */
--hz-page-light: var(--hz-bone-50);
/* raised list rows / neutral chip surface */
--hz-panel: var(--hz-ink-820);
--hz-plasma-base: oklch(79% 0.12 200);
--hz-plasma-bright: oklch(86% 0.11 200);
--hz-plasma-deep: oklch(60.38% 0.1027 200.5);
--hz-plasma-on: oklch(17.03% 0.0295 210.3);
--hz-plasma-soft: oklch(94% 0.04 200);
--hz-plasma-wash: oklch(28% 0.04 200);
--hz-pulse-duration: 2.2s;
--hz-pulse-duration-slow: 2.4s;
--hz-radius-frame: 16px;
--hz-radius-lg: 6px;
--hz-radius-md: 4px;
--hz-radius-sm: 3px;
--hz-radius-xl: 8px;
/* header strip, inset bars */
--hz-raised: var(--hz-ink-900);
--hz-sand-300: rgb(80.392% 74.902% 60.392%);
--hz-slate-base: oklch(46% 0.025 255);
--hz-slate-dark: oklch(68% 0.03 255);
--hz-slate-ink: oklch(32% 0.02 255);
--hz-slate-on: oklch(100% 0 0);
--hz-slate-soft: oklch(93% 0.012 255);
--hz-spruce: rgb(18.431% 22.745% 20.392%);
--hz-teal-base: oklch(58.05% 0.099 195);
--hz-teal-dark: oklch(74% 0.11 195);
--hz-teal-ink: oklch(44.23% 0.0755 195.2);
--hz-teal-on: oklch(100% 0 0);
--hz-teal-soft: oklch(95.5% 0.03 195);
/* emphasis in body */
--hz-text-bright: var(--hz-bone-150);
/* mono numerals */
--hz-text-data: var(--hz-bone-250);
/* disabled / placeholder — no AA requirement (WCAG 1.4.3 exempts disabled controls) */
--hz-text-disabled: var(--hz-bone-500);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-bone-400);
/* eyebrows, metric labels */
--hz-text-label: var(--hz-bone-350);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-bone-450);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-bone-450);
/* meter percentages */
--hz-text-muted: var(--hz-bone-350);
/* primary display text */
--hz-text-primary: var(--hz-bone-100);
/* quiet captions */
--hz-text-quiet: var(--hz-bone-450);
/* body copy */
--hz-text-secondary: var(--hz-bone-300);
/* service names */
--hz-text-strong: var(--hz-bone-200);
/* subdued copy, captions */
--hz-text-tertiary: var(--hz-bone-400);
--hz-track-caps: 0.22em;
--hz-track-eyebrow: 0.18em;
--hz-track-header: 0.24em;
--hz-track-host: 0.07em;
--hz-track-none: 0em;
--hz-track-tight: -0.025em;
/* default paragraph copy */
--hz-type-body-font-family: var(--hz-face-display);
/* default paragraph copy */
--hz-type-body-font-size: var(--hz-fs-md);
/* default paragraph copy */
--hz-type-body-font-weight: var(--hz-w-regular);
/* default paragraph copy */
--hz-type-body-line-height: var(--hz-lh-relaxed);
/* default paragraph copy */
--hz-type-body-letter-spacing: var(--hz-track-none);
/* default paragraph copy */
--hz-type-body: var(--hz-type-body-font-weight) var(--hz-type-body-font-size)/var(--hz-type-body-line-height) var(--hz-type-body-font-family);
/* emphasized paragraph copy */
--hz-type-body-strong-font-family: var(--hz-face-display);
/* emphasized paragraph copy */
--hz-type-body-strong-font-size: var(--hz-fs-md);
/* emphasized paragraph copy */
--hz-type-body-strong-font-weight: var(--hz-w-semibold);
/* emphasized paragraph copy */
--hz-type-body-strong-line-height: var(--hz-lh-relaxed);
/* emphasized paragraph copy */
--hz-type-body-strong-letter-spacing: var(--hz-track-none);
/* emphasized paragraph copy */
--hz-type-body-strong: var(--hz-type-body-strong-font-weight) var(--hz-type-body-strong-font-size)/var(--hz-type-body-strong-line-height) var(--hz-type-body-strong-font-family);
/* small meta / spec annotation */
--hz-type-caption-font-family: var(--hz-face-mono);
/* small meta / spec annotation */
--hz-type-caption-font-size: var(--hz-fs-tiny);
/* small meta / spec annotation */
--hz-type-caption-font-weight: var(--hz-w-regular);
/* small meta / spec annotation */
--hz-type-caption-line-height: var(--hz-lh-single);
/* small meta / spec annotation */
--hz-type-caption-letter-spacing: var(--hz-track-none);
/* small meta / spec annotation */
--hz-type-caption: var(--hz-type-caption-font-weight) var(--hz-type-caption-font-size)/var(--hz-type-caption-line-height) var(--hz-type-caption-font-family);
/* numeric / data readout */
--hz-type-data-font-family: var(--hz-face-mono);
/* numeric / data readout */
--hz-type-data-font-size: var(--hz-fs-sm);
/* numeric / data readout */
--hz-type-data-font-weight: var(--hz-w-regular);
/* numeric / data readout */
--hz-type-data-line-height: var(--hz-lh-single);
/* numeric / data readout */
--hz-type-data-letter-spacing: var(--hz-track-none);
/* numeric / data readout */
--hz-type-data: var(--hz-type-data-font-weight) var(--hz-type-data-font-size)/var(--hz-type-data-line-height) var(--hz-type-data-font-family);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-font-family: var(--hz-face-mono);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-font-size: var(--hz-fs-xs);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-font-weight: var(--hz-w-bold);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-line-height: var(--hz-lh-single);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-letter-spacing: var(--hz-track-eyebrow);
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow-text-transform: uppercase;
/* uppercase tracked micro-label — component labels (gauge/stat) */
--hz-type-eyebrow: var(--hz-type-eyebrow-font-weight) var(--hz-type-eyebrow-font-size)/var(--hz-type-eyebrow-line-height) var(--hz-type-eyebrow-font-family);
/* hero / page title */
--hz-type-heading-1-font-family: var(--hz-face-display);
/* hero / page title */
--hz-type-heading-1-font-size: var(--hz-fs-display);
/* hero / page title */
--hz-type-heading-1-font-weight: var(--hz-w-semibold);
/* hero / page title */
--hz-type-heading-1-line-height: var(--hz-lh-tight);
/* hero / page title */
--hz-type-heading-1-letter-spacing: var(--hz-track-tight);
/* hero / page title */
--hz-type-heading-1: var(--hz-type-heading-1-font-weight) var(--hz-type-heading-1-font-size)/var(--hz-type-heading-1-line-height) var(--hz-type-heading-1-font-family);
/* section heading */
--hz-type-heading-2-font-family: var(--hz-face-display);
/* section heading */
--hz-type-heading-2-font-size: var(--hz-fs-title);
/* section heading */
--hz-type-heading-2-font-weight: var(--hz-w-semibold);
/* section heading */
--hz-type-heading-2-line-height: var(--hz-lh-snug);
/* section heading */
--hz-type-heading-2-letter-spacing: var(--hz-track-tight);
/* section heading */
--hz-type-heading-2: var(--hz-type-heading-2-font-weight) var(--hz-type-heading-2-font-size)/var(--hz-type-heading-2-line-height) var(--hz-type-heading-2-font-family);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3-font-family: var(--hz-face-display);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3-font-size: var(--hz-fs-host);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3-font-weight: var(--hz-w-semibold);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3-line-height: var(--hz-lh-snug);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3-letter-spacing: var(--hz-track-host);
/* component / card title — matches hz-tile's host-name treatment */
--hz-type-heading-3: var(--hz-type-heading-3-font-weight) var(--hz-type-heading-3-font-size)/var(--hz-type-heading-3-line-height) var(--hz-type-heading-3-font-family);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-font-family: var(--hz-face-mono);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-font-size: var(--hz-fs-sm);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-font-weight: var(--hz-w-bold);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-line-height: var(--hz-lh-single);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-letter-spacing: var(--hz-track-host);
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label-text-transform: uppercase;
/* small mono identity/meta text — tile/status-pill */
--hz-type-host-label: var(--hz-type-host-label-font-weight) var(--hz-type-host-label-font-size)/var(--hz-type-host-label-line-height) var(--hz-type-host-label-font-family);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-font-family: var(--hz-face-mono);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-font-size: var(--hz-fs-xs);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-font-weight: var(--hz-w-bold);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-line-height: var(--hz-lh-single);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-letter-spacing: var(--hz-track-header);
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header-text-transform: uppercase;
/* uppercase tracked micro-label — Foundations docs section titles */
--hz-type-section-header: var(--hz-type-section-header-font-weight) var(--hz-type-section-header-font-size)/var(--hz-type-section-header-line-height) var(--hz-type-section-header-font-family);
--hz-violet-base: oklch(55% 0.16 295);
--hz-violet-dark: oklch(72% 0.15 295);
--hz-violet-ink: oklch(42% 0.13 295);
--hz-violet-on: oklch(100% 0 0);
--hz-violet-on-dark: oklch(19% 0.02 300);
--hz-violet-soft: oklch(95.32% 0.0255 297.9);
--hz-violet-wash-dark: oklch(27% 0.045 295);
--hz-w-bold: 700;
--hz-w-medium: 500;
--hz-w-regular: 400;
--hz-w-semibold: 600;
/* error/destructive — shared across surfaces */
--hz-warn: var(--hz-ember);
/* error/destructive — shared across surfaces */
--hz-warn-bright: var(--hz-ember-bright);
/* error/destructive — shared across surfaces */
--hz-warn-deep: var(--hz-ember-deep);
--hz-warn-edge: var(--hz-ember-edge);
/* in-progress/caution — shared across surfaces */
--hz-working: var(--hz-amber);
/* in-progress/caution — shared across surfaces */
--hz-working-text: var(--hz-amber-bright);
}
@media (color-gamut: p3) {
:root {
--hz-flux-bright: oklch(78% 0.18 350);
--hz-flux-soft: oklch(93.9% 0.0487 349.2);
--hz-indigo-soft: oklch(95.4% 0.0242 258);
--hz-ion-base: oklch(71.33% 0.1859 296.8);
/* interactive/brand accent — active nav, primary action fill, selection edge. Never status: ember is warn-only. */
--hz-accent: var(--hz-ion-base);
/* quiet accent structure — ghost-button border, link underline */
--hz-accent-deep: var(--hz-ion-deep);
--hz-ion-bright: oklch(78.34% 0.1379 297.3);
/* accent text on dark — links, active-nav label, selected-row emphasis */
--hz-accent-bright: var(--hz-ion-bright);
--hz-ion-soft: oklch(93.71% 0.0383 298.2);
/* selection fill — selected row / active list item background */
--hz-accent-wash: var(--hz-ion-wash);
--hz-plasma-deep: oklch(60% 0.11 200);
--hz-plasma-on: oklch(17% 0.03 210);
--hz-teal-base: oklch(58% 0.1 195);
--hz-teal-ink: oklch(44% 0.08 195);
--hz-violet-soft: oklch(95.37% 0.0277 296.9);
}
}
@media (color-gamut: rec2020) {
:root {
--hz-flux-bright: oklch(78% 0.18 350);
--hz-flux-soft: oklch(94% 0.05 350);
--hz-indigo-soft: oklch(95.43% 0.0243 258.7);
--hz-ion-base: oklch(71.55% 0.1876 296.9);
/* interactive/brand accent — active nav, primary action fill, selection edge. Never status: ember is warn-only. */
--hz-accent: var(--hz-ion-base);
/* quiet accent structure — ghost-button border, link underline */
--hz-accent-deep: var(--hz-ion-deep);
--hz-ion-bright: oklch(78.49% 0.14 297.9);
/* accent text on dark — links, active-nav label, selected-row emphasis */
--hz-accent-bright: var(--hz-ion-bright);
--hz-ion-soft: oklch(93.79% 0.0389 298.9);
/* selection fill — selected row / active list item background */
--hz-accent-wash: var(--hz-ion-wash);
--hz-plasma-deep: oklch(60% 0.11 200);
--hz-plasma-on: oklch(17% 0.03 210);
--hz-teal-base: oklch(58% 0.1 195);
--hz-teal-ink: oklch(44% 0.08 195);
--hz-violet-soft: oklch(95.41% 0.0281 297.3);
}
}
:root[data-hz-mode='light'] {
/* interactive/brand accent — active nav, primary action fill, selection edge. Never status: ember is warn-only. */
--hz-accent: var(--hz-ion-deep);
/* accent text on dark — links, active-nav label, selected-row emphasis */
--hz-accent-bright: var(--hz-ion-deep);
/* quiet accent structure — ghost-button border, link underline */
--hz-accent-deep: var(--hz-ion-base);
/* selection fill — selected row / active list item background */
--hz-accent-wash: var(--hz-ion-soft);
/* surface background */
--hz-canvas: var(--hz-bone-50);
/* card body background */
--hz-card-surface: var(--hz-bone-50);
/* text on solid accent fill (dark ink — console accent is bright) */
--hz-on-accent: var(--hz-neutral-0);
/* raised list rows / neutral chip surface */
--hz-panel: var(--hz-bone-150);
/* header strip, inset bars */
--hz-raised: var(--hz-bone-100);
/* emphasis in body */
--hz-text-bright: var(--hz-ink-870);
/* mono numerals */
--hz-text-data: var(--hz-bone-750);
/* disabled / placeholder — no AA requirement (WCAG 1.4.3 exempts disabled controls) */
--hz-text-disabled: var(--hz-bone-400);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-bone-600);
/* eyebrows, metric labels */
--hz-text-label: var(--hz-bone-750);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-bone-700);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-bone-600);
/* meter percentages */
--hz-text-muted: var(--hz-bone-700);
/* primary display text */
--hz-text-primary: var(--hz-ink-950);
/* quiet captions */
--hz-text-quiet: var(--hz-bone-600);
/* body copy */
--hz-text-secondary: var(--hz-ink-900);
/* service names */
--hz-text-strong: var(--hz-ink-820);
/* subdued copy, captions */
--hz-text-tertiary: var(--hz-bone-700);
}
@media (prefers-color-scheme: light) {
:root:not([data-hz-mode='dark']) {
/* interactive/brand accent — active nav, primary action fill, selection edge. Never status: ember is warn-only. */
--hz-accent: var(--hz-ion-deep);
/* accent text on dark — links, active-nav label, selected-row emphasis */
--hz-accent-bright: var(--hz-ion-deep);
/* quiet accent structure — ghost-button border, link underline */
--hz-accent-deep: var(--hz-ion-base);
/* selection fill — selected row / active list item background */
--hz-accent-wash: var(--hz-ion-soft);
/* surface background */
--hz-canvas: var(--hz-bone-50);
/* card body background */
--hz-card-surface: var(--hz-bone-50);
/* text on solid accent fill (dark ink — console accent is bright) */
--hz-on-accent: var(--hz-neutral-0);
/* raised list rows / neutral chip surface */
--hz-panel: var(--hz-bone-150);
/* header strip, inset bars */
--hz-raised: var(--hz-bone-100);
/* emphasis in body */
--hz-text-bright: var(--hz-ink-870);
/* mono numerals */
--hz-text-data: var(--hz-bone-750);
/* disabled / placeholder — no AA requirement (WCAG 1.4.3 exempts disabled controls) */
--hz-text-disabled: var(--hz-bone-400);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-bone-600);
/* eyebrows, metric labels */
--hz-text-label: var(--hz-bone-750);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-bone-700);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-bone-600);
/* meter percentages */
--hz-text-muted: var(--hz-bone-700);
/* primary display text */
--hz-text-primary: var(--hz-ink-950);
/* quiet captions */
--hz-text-quiet: var(--hz-bone-600);
/* body copy */
--hz-text-secondary: var(--hz-ink-900);
/* service names */
--hz-text-strong: var(--hz-ink-820);
/* subdued copy, captions */
--hz-text-tertiary: var(--hz-bone-700);
}
}
/* -------------------------------------------
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
* ------------------------------------------- */
[data-hz-surface='display'] {
/* hairline dividers, input borders */
--hz-border: var(--hz-neutral-800);
/* stronger separators, hovered inputs */
--hz-border-strong: var(--hz-neutral-700);
/* primary action fill */
--hz-brand: var(--hz-violet-dark);
/* brand-colored text / links */
--hz-brand-text: var(--hz-violet-dark);
/* tinted brand background, focus halo */
--hz-brand-wash: var(--hz-violet-wash-dark);
/* app/page background */
--hz-canvas: var(--hz-neutral-850);
/* headings + body + form inputs (Geist) */
--hz-font-display: var(--hz-face-sans);
/* data, numerals, labels only (Geist Mono) */
--hz-font-mono: var(--hz-face-sans-mono);
/* text/icon on brand fill */
--hz-on-brand: var(--hz-violet-on-dark);
/* nested / inset panel */
--hz-panel: var(--hz-neutral-850);
/* card / sheet surface */
--hz-raised: var(--hz-neutral-900);
/* recessed wells, code blocks */
--hz-sunken: var(--hz-neutral-975);
/* emphasis in body */
--hz-text-bright: var(--hz-neutral-100);
/* mono numerals */
--hz-text-data: var(--hz-neutral-300);
/* disabled / placeholder */
--hz-text-disabled: var(--hz-neutral-700);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-neutral-400);
/* field labels, eyebrows */
--hz-text-label: var(--hz-neutral-300);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-neutral-400);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-neutral-400);
/* meter percentages */
--hz-text-muted: var(--hz-neutral-400);
/* headings, primary copy */
--hz-text-primary: var(--hz-neutral-50);
/* quiet captions */
--hz-text-quiet: var(--hz-neutral-400);
/* body copy */
--hz-text-secondary: var(--hz-neutral-300);
/* service names */
--hz-text-strong: var(--hz-neutral-200);
/* captions, helper text */
--hz-text-tertiary: var(--hz-neutral-400);
/* default paragraph copy */
--hz-type-body-font-family: var(--hz-face-sans);
/* default paragraph copy */
--hz-type-body-font-size: var(--hz-fs-md);
/* default paragraph copy */
--hz-type-body-font-weight: var(--hz-w-regular);
/* default paragraph copy */
--hz-type-body-line-height: var(--hz-lh-open);
/* default paragraph copy */
--hz-type-body-letter-spacing: var(--hz-track-none);
/* default paragraph copy */
--hz-type-body: var(--hz-type-body-font-weight) var(--hz-type-body-font-size)/var(--hz-type-body-line-height) var(--hz-type-body-font-family);
/* emphasized paragraph copy */
--hz-type-body-strong-font-family: var(--hz-face-sans);
/* emphasized paragraph copy */
--hz-type-body-strong-font-size: var(--hz-fs-md);
/* emphasized paragraph copy */
--hz-type-body-strong-font-weight: var(--hz-w-semibold);
/* emphasized paragraph copy */
--hz-type-body-strong-line-height: var(--hz-lh-open);
/* emphasized paragraph copy */
--hz-type-body-strong-letter-spacing: var(--hz-track-none);
/* emphasized paragraph copy */
--hz-type-body-strong: var(--hz-type-body-strong-font-weight) var(--hz-type-body-strong-font-size)/var(--hz-type-body-strong-line-height) var(--hz-type-body-strong-font-family);
/* small meta / spec annotation */
--hz-type-caption-font-family: var(--hz-face-sans-mono);
/* small meta / spec annotation */
--hz-type-caption-font-size: var(--hz-fs-tiny);
/* small meta / spec annotation */
--hz-type-caption-font-weight: var(--hz-w-regular);
/* small meta / spec annotation */
--hz-type-caption-line-height: var(--hz-lh-single);
/* small meta / spec annotation */
--hz-type-caption-letter-spacing: var(--hz-track-none);
/* small meta / spec annotation */
--hz-type-caption: var(--hz-type-caption-font-weight) var(--hz-type-caption-font-size)/var(--hz-type-caption-line-height) var(--hz-type-caption-font-family);
/* numeric / data readout */
--hz-type-data-font-family: var(--hz-face-sans-mono);
/* numeric / data readout */
--hz-type-data-font-size: var(--hz-fs-sm);
/* numeric / data readout */
--hz-type-data-font-weight: var(--hz-w-regular);
/* numeric / data readout */
--hz-type-data-line-height: var(--hz-lh-single);
/* numeric / data readout */
--hz-type-data-letter-spacing: var(--hz-track-none);
/* numeric / data readout */
--hz-type-data: var(--hz-type-data-font-weight) var(--hz-type-data-font-size)/var(--hz-type-data-line-height) var(--hz-type-data-font-family);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-font-family: var(--hz-face-sans-mono);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-font-size: var(--hz-fs-xs);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-font-weight: var(--hz-w-bold);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-line-height: var(--hz-lh-single);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-letter-spacing: var(--hz-track-eyebrow);
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow-text-transform: uppercase;
/* uppercase tracked micro-label — component labels */
--hz-type-eyebrow: var(--hz-type-eyebrow-font-weight) var(--hz-type-eyebrow-font-size)/var(--hz-type-eyebrow-line-height) var(--hz-type-eyebrow-font-family);
/* hero / page title */
--hz-type-heading-1-font-family: var(--hz-face-sans);
/* hero / page title */
--hz-type-heading-1-font-size: var(--hz-fs-display);
/* hero / page title */
--hz-type-heading-1-font-weight: var(--hz-w-semibold);
/* hero / page title */
--hz-type-heading-1-line-height: var(--hz-lh-snug);
/* hero / page title */
--hz-type-heading-1-letter-spacing: var(--hz-track-none);
/* hero / page title */
--hz-type-heading-1: var(--hz-type-heading-1-font-weight) var(--hz-type-heading-1-font-size)/var(--hz-type-heading-1-line-height) var(--hz-type-heading-1-font-family);
/* section heading */
--hz-type-heading-2-font-family: var(--hz-face-sans);
/* section heading */
--hz-type-heading-2-font-size: var(--hz-fs-title);
/* section heading */
--hz-type-heading-2-font-weight: var(--hz-w-semibold);
/* section heading */
--hz-type-heading-2-line-height: var(--hz-lh-normal);
/* section heading */
--hz-type-heading-2-letter-spacing: var(--hz-track-none);
/* section heading */
--hz-type-heading-2: var(--hz-type-heading-2-font-weight) var(--hz-type-heading-2-font-size)/var(--hz-type-heading-2-line-height) var(--hz-type-heading-2-font-family);
/* component / card title */
--hz-type-heading-3-font-family: var(--hz-face-sans);
/* component / card title */
--hz-type-heading-3-font-size: var(--hz-fs-host);
/* component / card title */
--hz-type-heading-3-font-weight: var(--hz-w-semibold);
/* component / card title */
--hz-type-heading-3-line-height: var(--hz-lh-normal);
/* component / card title */
--hz-type-heading-3-letter-spacing: var(--hz-track-none);
/* component / card title */
--hz-type-heading-3: var(--hz-type-heading-3-font-weight) var(--hz-type-heading-3-font-size)/var(--hz-type-heading-3-line-height) var(--hz-type-heading-3-font-family);
/* small mono identity/meta text */
--hz-type-host-label-font-family: var(--hz-face-sans-mono);
/* small mono identity/meta text */
--hz-type-host-label-font-size: var(--hz-fs-sm);
/* small mono identity/meta text */
--hz-type-host-label-font-weight: var(--hz-w-bold);
/* small mono identity/meta text */
--hz-type-host-label-line-height: var(--hz-lh-single);
/* small mono identity/meta text */
--hz-type-host-label-letter-spacing: var(--hz-track-host);
/* small mono identity/meta text */
--hz-type-host-label-text-transform: uppercase;
/* small mono identity/meta text */
--hz-type-host-label: var(--hz-type-host-label-font-weight) var(--hz-type-host-label-font-size)/var(--hz-type-host-label-line-height) var(--hz-type-host-label-font-family);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-font-family: var(--hz-face-sans-mono);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-font-size: var(--hz-fs-xs);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-font-weight: var(--hz-w-bold);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-line-height: var(--hz-lh-single);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-letter-spacing: var(--hz-track-header);
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header-text-transform: uppercase;
/* uppercase tracked micro-label — docs section titles */
--hz-type-section-header: var(--hz-type-section-header-font-weight) var(--hz-type-section-header-font-size)/var(--hz-type-section-header-line-height) var(--hz-type-section-header-font-family);
}
[data-hz-surface='display'][data-hz-mode='light'] {
/* hairline dividers, input borders */
--hz-border: var(--hz-neutral-100);
/* stronger separators, hovered inputs */
--hz-border-strong: var(--hz-neutral-200);
/* primary action fill */
--hz-brand: var(--hz-violet-base);
/* brand-colored text / links */
--hz-brand-text: var(--hz-violet-ink);
/* tinted brand background, focus halo */
--hz-brand-wash: var(--hz-violet-soft);
/* app/page background */
--hz-canvas: var(--hz-neutral-25);
/* text/icon on brand fill */
--hz-on-brand: var(--hz-violet-on);
/* nested / inset panel */
--hz-panel: var(--hz-neutral-50);
/* card / sheet surface */
--hz-raised: var(--hz-neutral-0);
/* recessed wells, code blocks */
--hz-sunken: var(--hz-neutral-50);
/* emphasis in body */
--hz-text-bright: var(--hz-neutral-850);
/* mono numerals */
--hz-text-data: var(--hz-neutral-800);
/* disabled / placeholder */
--hz-text-disabled: var(--hz-neutral-300);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-neutral-600);
/* field labels, eyebrows */
--hz-text-label: var(--hz-neutral-700);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-neutral-600);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-neutral-600);
/* meter percentages */
--hz-text-muted: var(--hz-neutral-700);
/* headings, primary copy */
--hz-text-primary: var(--hz-neutral-900);
/* quiet captions */
--hz-text-quiet: var(--hz-neutral-600);
/* body copy */
--hz-text-secondary: var(--hz-neutral-700);
/* service names */
--hz-text-strong: var(--hz-neutral-900);
/* captions, helper text */
--hz-text-tertiary: var(--hz-neutral-600);
}
@media (prefers-color-scheme: light) {
[data-hz-surface='display']:not([data-hz-mode='dark']) {
/* hairline dividers, input borders */
--hz-border: var(--hz-neutral-100);
/* stronger separators, hovered inputs */
--hz-border-strong: var(--hz-neutral-200);
/* primary action fill */
--hz-brand: var(--hz-violet-base);
/* brand-colored text / links */
--hz-brand-text: var(--hz-violet-ink);
/* tinted brand background, focus halo */
--hz-brand-wash: var(--hz-violet-soft);
/* app/page background */
--hz-canvas: var(--hz-neutral-25);
/* text/icon on brand fill */
--hz-on-brand: var(--hz-violet-on);
/* nested / inset panel */
--hz-panel: var(--hz-neutral-50);
/* card / sheet surface */
--hz-raised: var(--hz-neutral-0);
/* recessed wells, code blocks */
--hz-sunken: var(--hz-neutral-50);
/* emphasis in body */
--hz-text-bright: var(--hz-neutral-850);
/* mono numerals */
--hz-text-data: var(--hz-neutral-800);
/* disabled / placeholder */
--hz-text-disabled: var(--hz-neutral-300);
/* inline data on neutral rows */
--hz-text-faint: var(--hz-neutral-600);
/* field labels, eyebrows */
--hz-text-label: var(--hz-neutral-700);
/* dimmest labels, meta */
--hz-text-label-dim: var(--hz-neutral-600);
/* unit suffixes */
--hz-text-label-dimmest: var(--hz-neutral-600);
/* meter percentages */
--hz-text-muted: var(--hz-neutral-700);
/* headings, primary copy */
--hz-text-primary: var(--hz-neutral-900);
/* quiet captions */
--hz-text-quiet: var(--hz-neutral-600);
/* body copy */
--hz-text-secondary: var(--hz-neutral-700);
/* service names */
--hz-text-strong: var(--hz-neutral-900);
/* captions, helper text */
--hz-text-tertiary: var(--hz-neutral-600);
}
}
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides, wa-base, wa-utilities;
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/native.css */
@layer wa-native {
html {
box-sizing: border-box;
margin: 0;
padding: 0;
tab-size: 4;
background-color: var(--wa-color-surface-default);
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
min-height: 100vh;
margin: 0;
padding: 0;
color: var(--wa-color-text-normal);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
address,
audio,
blockquote,
dd,
details,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
iframe,
ol,
p,
pre,
table,
ul,
video {
margin: 0;
&:has(+ *) {
margin-block-end: var(--wa-content-spacing);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--wa-font-family-heading);
font-weight: var(--wa-font-weight-heading);
line-height: var(--wa-line-height-condensed);
text-wrap: balance;
}
h1 {
font-size: var(--wa-font-size-3xl);
}
h2 {
font-size: var(--wa-font-size-2xl);
}
h3 {
font-size: var(--wa-font-size-xl);
}
h4 {
font-size: var(--wa-font-size-l);
}
h5 {
font-size: var(--wa-font-size-m);
}
h6 {
font-size: var(--wa-font-size-xs);
}
p {
text-wrap: wrap;
}
@supports (text-wrap: pretty) {
p {
text-wrap: pretty;
}
}
blockquote {
padding: var(--wa-space-xl);
color: var(--wa-color-text-quiet);
font-family: var(--wa-font-family-longform);
font-size: var(--wa-font-size-larger);
border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
}
hr {
margin: var(--wa-content-spacing) 0;
border: none;
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
figcaption {
margin-block-start: var(--wa-space-xs);
color: var(--wa-color-text-quiet);
font-size: var(--wa-font-size-smaller);
line-height: var(--wa-line-height-condensed);
}
ul,
ol {
padding: 0;
}
li > ul,
li > ol {
margin-inline-start: 0.25em;
}
ul {
list-style: disc;
}
li {
margin-inline-start: 1.125em;
padding: 0;
}
ul > li::marker {
color: color-mix(in oklch, currentColor 40%, transparent);
}
ol > li::marker {
color: color-mix(in oklch, currentColor 60%, transparent);
}
dt {
font-weight: var(--wa-font-weight-bold);
}
menu {
list-style: none;
margin: 0;
padding: 0;
& > li {
margin: 0;
}
}
strong,
b {
font-weight: var(--wa-font-weight-bold);
}
em,
i {
font-style: italic;
}
u {
text-decoration-line: underline;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
s {
text-decoration-line: line-through;
text-decoration-thickness: 0.09375em;
}
ins {
text-decoration-color: var(--wa-color-success-on-quiet);
text-decoration-line: underline;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
del {
color: color-mix(in oklab, currentColor, transparent 10%);
text-decoration-color: var(--wa-color-danger-on-quiet);
text-decoration-line: line-through;
text-decoration-thickness: 0.09375em;
}
mark {
padding: 0.125em 0.25em;
color: var(--wa-color-warning-on-quiet);
background-color: var(--wa-color-warning-fill-quiet);
border-radius: var(--wa-border-radius-s);
}
small {
font-size: var(--wa-font-size-smaller);
}
sub,
sup {
font-size: var(--wa-font-size-smaller);
line-height: 0;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
abbr[title] {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
cursor: help;
}
kbd {
padding: 0.125em 0.25em;
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
border-radius: var(--wa-border-radius-s);
box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);
wa-icon {
vertical-align: -2px;
}
}
a {
color: var(--wa-color-text-link);
text-decoration: var(--wa-link-decoration-default);
-webkit-text-decoration: var(--wa-link-decoration-default);
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
*:is([appearance~=accent], .wa-accent) {
a,
a:hover {
color: currentColor;
}
}
a:hover {
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
text-decoration: var(--wa-link-decoration-hover);
-webkit-text-decoration: var(--wa-link-decoration-hover);
}
a:focus,
button:focus {
outline: none;
}
a:focus-visible,
button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
code,
samp,
var {
padding: 0.125em 0.25em;
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
background-color: var(--wa-color-overlay-inline);
border-radius: var(--wa-border-radius-s);
}
pre {
padding: var(--wa-space-m);
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
white-space: pre;
background-color: var(--wa-color-overlay-inline);
border-radius: var(--wa-panel-border-radius);
overflow-x: auto;
& code,
& samp,
& var {
padding: 0;
font-size: 1em;
background-color: transparent;
}
@media print {
background: none;
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
}
img,
svg,
picture,
video {
max-width: 100%;
height: auto;
}
img,
picture,
video {
border-radius: var(--wa-border-radius-m);
}
embed,
iframe,
object {
max-width: 100%;
}
iframe {
border: none;
}
table {
width: 100%;
font-variant-numeric: tabular-nums;
border: none;
border-collapse: collapse;
}
caption {
color: var(--wa-color-text-quiet);
font-size: var(--wa-font-size-smaller);
&:has(+ *) {
margin-block-end: 0.75em;
}
}
tbody {
tr {
border-block-start: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-quiet);
:where(table.wa-zebra-rows) &:nth-child(odd) {
background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
}
:where(table.wa-hover-rows) & {
@media (hover: hover) {
&:hover {
background-color: var(--wa-color-fill-quiet);
&,
+ tr {
border-block-start-color: var(--wa-color-border-normal);
}
}
}
}
}
}
td,
th {
padding: 0.75em;
text-align: start;
vertical-align: top;
}
th {
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-bold);
&:not([scope=row]):not(:has(+ td)) {
border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
}
}
details {
padding: 0;
background-color: var(--wa-color-surface-default);
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
border-radius: var(--wa-panel-border-radius);
overflow-anchor: none;
summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--wa-space-m);
border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
cursor: pointer;
user-select: none;
-webkit-user-select: none;
> * {
margin: 0;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
}
}
&[open] {
padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);
summary {
margin-inline: calc(-1 * var(--wa-space-m));
border-end-start-radius: 0;
border-end-end-radius: 0;
}
}
&::details-content {
box-sizing: border-box;
}
@media print {
background: none;
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
summary {
list-style: none;
}
}
}
details summary {
&::marker,
&::-webkit-details-marker {
display: none;
}
&::after {
content: "";
background-color: var(--wa-color-text-quiet);
mask: url('data:image/svg+xml;utf8,') center no-repeat;
width: 1rem;
height: 1rem;
rotate: 0deg;
}
&:dir(rtl)::after {
rotate: 180deg;
}
}
details[open] summary::after {
rotate: 90deg;
}
dialog {
flex-direction: column;
align-items: start;
width: 32rem;
max-width: calc(100% - var(--wa-space-l));
padding: var(--wa-space-l);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-panel-border-radius);
border: none;
box-shadow: var(--wa-shadow-l);
transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);
margin: auto;
inset: 0;
&[open] {
display: flex;
}
&:focus {
outline: none;
}
}
dialog::backdrop {
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
}
label {
display: inline-block;
position: relative;
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
&:has(input:not([type=button], [type=checkbox], [type=color], [type=file], [type=hidden], [type=image], [type=radio], [type=reset], [type=submit]), textarea, select) {
width: 100%;
}
& + :is(input:not([type=checkbox], [type=radio]), textarea, select),
& > :is(input:not([type=checkbox], [type=radio]), textarea, select) {
margin-block-start: 0.5em;
}
}
fieldset {
padding: var(--wa-space-l);
padding-block-start: calc(var(--wa-space-l) - 0.5em);
border: solid 1px var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-m);
}
legend {
padding: 0;
padding-inline: var(--wa-space-xs);
font-weight: var(--wa-form-control-label-font-weight);
}
button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=file],
a.wa-button {
&:not(input[type=file]),
&::file-selector-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-font-weight-action);
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
border-style: var(--wa-border-style);
border-width: max(1px, var(--wa-form-control-border-width));
border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius));
border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius));
border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius));
border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius));
transition-property:
background,
border,
box-shadow,
color;
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
margin-inline-start: var(--_button-horizontal-indent);
margin-block-start: var(--_button-vertical-indent);
}
&.wa-outlined {
&:not(input[type=file]),
&::file-selector-button {
margin-inline-start: var(--_button-horizontal-indent-outlined);
margin-block-start: var(--_button-vertical-indent-outlined);
}
}
&:not(input[type=file]) {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
&:not(:disabled) {
@media (hover: hover) {
&:hover {
background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-hover));
transform: var(--wa-button-transform-hover);
}
}
&:active {
background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-active));
transform: var(--wa-button-transform-active);
}
@media (prefers-reduced-motion: reduce) {
&:hover,
&:active {
transform: none;
}
}
}
}
&:is(input[type=file]) {
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled) {
&::file-selector-button:hover {
background-color: color-mix(in oklab, var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)), var(--wa-color-mix-hover));
}
&::file-selector-button:active {
background-color: color-mix(in oklab, var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)), var(--wa-color-mix-active));
}
}
}
&.wa-plain {
&:not(input[type=file]),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type=file]):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type=file]):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(in oklab, var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)), var(--wa-color-mix-active));
}
}
}
&.wa-outlined {
&:not(input[type=file]),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
&:not(:disabled) {
&:not(input[type=file]):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type=file]):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(in oklab, var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)), var(--wa-color-mix-active));
}
}
}
&.wa-filled {
&:not(input[type=file]),
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type=file]):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(in oklab, var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)), var(--wa-color-mix-hover));
}
&:not(input[type=file]):active,
&::file-selector-button:active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(in oklab, var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)), var(--wa-color-mix-active));
}
}
&.wa-outlined {
&:not(input[type=file]),
&::file-selector-button {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
}
&.wa-accent {
&:not(input[type=file]),
&::file-selector-button {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type=file]):hover,
&::file-selector-button:hover {
background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-hover));
}
&:not(input[type=file]):active,
&::file-selector-button:active {
background-color: color-mix(in oklab, var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)), var(--wa-color-mix-active));
}
}
}
&.wa-pill {
&:not(input[type=file]),
&::file-selector-button {
border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill));
border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill));
border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill));
border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill));
}
}
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&:is(::-moz-focus-inner) {
border: 0;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
* {
pointer-events: none;
}
}
& > wa-icon:has(+ *) {
margin-inline-end: 0.75em;
}
& > * + wa-icon {
margin-inline-start: 0.75em;
}
}
input[type=file] {
display: block;
max-inline-size: 100%;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
border-radius: var(--wa-border-radius-m);
cursor: pointer;
}
input[type=checkbox],
label:has(input[type=checkbox]),
input[type=radio],
label:has(input[type=radio]) {
display: inline-flex;
width: fit-content;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
user-select: none;
-webkit-user-select: none;
&,
+ label {
cursor: pointer;
}
&:disabled,
&:has(:disabled) {
opacity: 0.5;
cursor: not-allowed;
}
}
input[type=checkbox],
input[type=radio] {
appearance: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
margin: 0;
margin-inline-end: 0.5em;
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-style: var(--wa-border-style);
border-width: var(--wa-form-control-border-width);
transition:
background var(--wa-transition-normal),
border-color var(--wa-transition-fast),
box-shadow var(--wa-transition-fast),
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
}
input[type=checkbox] {
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.8;
border-radius: min(calc(var(--wa-form-control-toggle-size) * 0.375), var(--wa-border-radius-s));
&:checked,
&:indeterminate {
color: var(--checked-icon-color);
background-color: var(--wa-form-control-activated-color);
border-color: var(--wa-form-control-activated-color);
}
&:checked::after,
&:indeterminate::after {
content: "";
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
background-color: currentColor;
}
&:checked::after {
mask: url('data:image/svg+xml;utf8,') center / 1em 1em no-repeat;
}
&:indeterminate::after {
mask: url('data:image/svg+xml;utf8,') center no-repeat;
}
}
input[type=radio] {
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.7;
color: transparent;
border-radius: 50%;
&:checked {
color: var(--checked-icon-color);
border-color: var(--wa-form-control-activated-color);
}
&:checked::after {
content: "";
aspect-ratio: 1;
width: 100%;
scale: var(--checked-icon-scale);
background-color: currentColor;
border-radius: 50%;
}
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=hidden], [type=image], [type=radio], [type=range], [type=reset], [type=submit]),
textarea,
select {
width: 100%;
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
color: var(--wa-form-control-value-color);
font-size: var(--wa-form-control-value-size);
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-style: var(--wa-form-control-border-style);
border-width: var(--wa-form-control-border-width);
border-radius: var(--wa-form-control-border-radius);
transition:
background-color var(--wa-transition-normal),
border-color var(--wa-transition-normal),
outline-color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
outline-offset: var(--wa-focus-ring-offset);
cursor: text;
&::placeholder {
color: var(--wa-form-control-placeholder-color);
user-select: none;
-webkit-user-select: none;
}
&:focus-visible {
outline-color: var(--wa-color-focus);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.wa-outlined {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
&.wa-filled {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
&.wa-outlined {
border-color: var(--wa-form-control-border-color);
}
}
&.wa-pill {
border-radius: var(--wa-border-radius-pill);
}
}
textarea {
height: auto;
min-height: var(--wa-form-control-height);
scroll-padding-block: var(--wa-form-control-padding-block);
padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline);
line-height: var(--wa-line-height-normal);
resize: vertical;
}
select {
--icon-caret: url('data:image/svg+xml;utf8,');
appearance: none;
position: relative;
min-width: 0;
background-image: var(--icon-caret), var(--icon-caret);
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
background-size: 1rem 1rem;
text-overflow: ellipsis;
padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
overflow: hidden;
cursor: pointer;
&[multiple] {
height: auto;
background-image: none;
padding-inline: var(--wa-form-control-padding-inline);
}
}
input[type=color] {
display: block;
block-size: var(--wa-form-control-height);
inline-size: var(--wa-form-control-height);
padding: calc(var(--wa-form-control-border-width) * 2);
font-size: 1em;
background: transparent;
border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);
cursor: pointer;
forced-color-adjust: none;
&::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: inherit;
}
&::-webkit-color-swatch {
border: none;
border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
}
input[type=range] {
--thumb-width: 1.4em;
--thumb-height: 1.4em;
--track-size: 0.5em;
-webkit-appearance: none;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: var(--track-size);
margin: 0;
font-size: inherit;
line-height: var(--wa-form-control-height);
vertical-align: middle;
background-color: var(--wa-color-neutral-fill-normal);
border-radius: calc(var(--track-size) / 2);
&::-webkit-slider-runnable-track {
width: 100%;
height: var(--track-size);
border: none;
border-radius: 999px;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--thumb-width);
height: var(--thumb-height);
margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);
background-color: var(--wa-form-control-activated-color);
border: solid 0.125em var(--wa-color-surface-default);
border-radius: 50%;
transition-property:
background-color,
border-color,
box-shadow,
color;
transition-duration: var(--wa-transition-normal);
transition-timing-function: var(--wa-transition-easing);
}
&:enabled {
&:focus-visible::-webkit-slider-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&::-webkit-slider-thumb {
cursor: pointer;
}
&::-webkit-slider-thumb:active {
cursor: grabbing;
}
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-progress {
height: var(--track-size);
background-color: var(--wa-color-neutral-fill-normal);
border-radius: 3px;
}
&::-moz-range-track {
width: 100%;
height: var(--track-size);
background-color: var(--wa-color-neutral-fill-normal);
border: none;
border-radius: 999px;
}
&::-moz-range-thumb {
width: var(--thumb-width);
height: var(--thumb-height);
background-color: var(--wa-form-control-activated-color);
border: solid 0.125em var(--wa-color-surface-default);
border-radius: 50%;
transition-property:
background-color,
border-color,
box-shadow,
color;
transition-duration: var(--wa-transition-normal);
transition-timing-function: var(--wa-transition-easing);
}
&:enabled {
&:focus-visible::-moz-range-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&::-moz-range-thumb {
cursor: pointer;
}
&::-moz-range-thumb:active {
cursor: grabbing;
}
}
}
label > input[type=range] {
margin-block-start: 1em;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:disabled {
opacity: 0.5;
cursor: not-allowed;
&::-webkit-slider-thumb {
cursor: not-allowed;
}
&::-moz-range-thumb {
cursor: not-allowed;
}
}
progress {
--indicator-color: var(--wa-color-brand-fill-loud);
width: 100%;
height: 1rem;
overflow: hidden;
color: var(--wa-color-brand-on-loud);
background-color: var(--wa-color-neutral-fill-normal);
border-radius: var(--wa-border-radius-pill);
&::-webkit-progress-bar {
background: transparent;
}
&[value]::-webkit-progress-value {
background-color: var(--indicator-color);
}
&::-moz-progress-bar {
background-color: var(--indicator-color);
}
}
progress:not([value]) {
padding-left: var(--inset-inline-start);
animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
&::-webkit-progress-bar {
background-color: var( --indicator-color );
}
}
@keyframes wa-fade-in {
from {
opacity: 0;
}
}
@keyframes wa-progress-indeterminate {
0% {
padding-inline-end: 100%;
}
25%, 100% {
padding-inline-end: 0%;
}
75%, 100% {
padding-inline-start: 100%;
}
}
.wa-invalid {
--wa-form-control-border-color: var(--wa-color-danger-border-loud);
--wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
--wa-form-control-value-color: var(--wa-color-danger-on-quiet);
--wa-color-focus: var(--wa-color-danger-border-loud);
--wa-color-text-quiet: var(--wa-color-danger-on-quiet);
}
.wa-valid {
--wa-form-control-border-color: var(--wa-color-success-border-loud);
--wa-form-control-activated-color: var(--wa-color-success-fill-loud);
--wa-form-control-value-color: var(--wa-color-success-on-quiet);
--wa-color-focus: var(--wa-color-success-border-loud);
--wa-color-text-quiet: var(--wa-color-success-on-quiet);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/fouce.css */
@layer wa-utilities {
.wa-cloak:has(:not(:defined)) {
animation: 2s step-end wa-fouce-cloak;
}
@keyframes wa-fouce-cloak {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/visually-hidden.css */
@layer wa-utilities {
.wa-visually-hidden:not(:focus-within),
.wa-visually-hidden-force,
.wa-visually-hidden-hint::part(hint),
.wa-visually-hidden-label::part(label),
.wa-visually-hidden-label::part(form-control-label) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: none !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/scroll-lock.css */
@layer wa-utilities {
@supports (scrollbar-gutter: stable) {
.wa-scroll-lock {
scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
}
.wa-scroll-lock body {
overflow: hidden !important;
}
}
@supports not (scrollbar-gutter: stable) {
.wa-scroll-lock body {
padding-right: var(--wa-scroll-lock-size) !important;
overflow: hidden !important;
}
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/placeholder.css */
@layer wa-utilities {
.wa-placeholder {
align-self: stretch;
background-color: var(--wa-color-neutral-fill-quiet);
border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
border-radius: var(--wa-border-radius-l);
padding: var(--wa-space-3xl);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/align-items.css */
@layer wa-utilities {
:where(.wa-align-items-start, .wa-align-items-end, .wa-align-items-center, .wa-align-items-stretch, .wa-align-items-baseline) {
display: flex;
}
.wa-align-items-start {
align-items: flex-start;
}
.wa-align-items-end {
align-items: flex-end;
}
.wa-align-items-center {
align-items: center;
}
.wa-align-items-stretch {
align-items: stretch;
}
.wa-align-items-baseline {
align-items: baseline;
}
.wa-align-self-start {
align-self: flex-start;
}
.wa-align-self-end {
align-self: flex-end;
}
.wa-align-self-center {
align-self: center;
}
.wa-align-self-stretch {
align-self: stretch;
}
.wa-align-self-baseline {
align-self: baseline;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/justify-content.css */
@layer wa-utilities {
:where(.wa-justify-content-start, .wa-justify-content-end, .wa-justify-content-center, .wa-justify-content-space-around, .wa-justify-content-space-between, .wa-justify-content-space-evenly) {
display: flex;
}
.wa-justify-content-start {
justify-content: flex-start;
}
.wa-justify-content-end {
justify-content: flex-end;
}
.wa-justify-content-center {
justify-content: center;
}
.wa-justify-content-space-around {
justify-content: space-around;
}
.wa-justify-content-space-between {
justify-content: space-between;
}
.wa-justify-content-space-evenly {
justify-content: space-evenly;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/flex-wrap.css */
@layer wa-utilities {
:where(.wa-flex-wrap, .wa-flex-nowrap, .wa-flex-wrap-reverse) {
display: flex;
}
.wa-flex-wrap {
flex-wrap: wrap;
}
.wa-flex-nowrap {
flex-wrap: nowrap;
}
.wa-flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/border-radius.css */
@layer wa-utilities {
.wa-border-radius-s {
border-radius: var(--wa-border-radius-s);
}
.wa-border-radius-m {
border-radius: var(--wa-border-radius-m);
}
.wa-border-radius-l {
border-radius: var(--wa-border-radius-l);
}
.wa-border-radius-pill {
border-radius: var(--wa-border-radius-pill);
}
.wa-border-radius-circle {
border-radius: var(--wa-border-radius-circle);
}
.wa-border-radius-square {
border-radius: var(--wa-border-radius-square);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/gap.css */
@layer wa-utilities {
:where(.wa-gap-0, .wa-gap-3xs, .wa-gap-2xs, .wa-gap-xs, .wa-gap-s, .wa-gap-m, .wa-gap-l, .wa-gap-xl, .wa-gap-2xl, .wa-gap-3xl, .wa-gap-4xl, .wa-gap-5xl) {
display: flex;
}
.wa-gap-0 {
gap: 0px;
}
.wa-gap-3xs {
gap: var(--wa-space-3xs);
}
.wa-gap-2xs {
gap: var(--wa-space-2xs);
}
.wa-gap-xs {
gap: var(--wa-space-xs);
}
.wa-gap-s {
gap: var(--wa-space-s);
}
.wa-gap-m {
gap: var(--wa-space-m);
}
.wa-gap-l {
gap: var(--wa-space-l);
}
.wa-gap-xl {
gap: var(--wa-space-xl);
}
.wa-gap-2xl {
gap: var(--wa-space-2xl);
}
.wa-gap-3xl {
gap: var(--wa-space-3xl);
}
.wa-gap-4xl {
gap: var(--wa-space-4xl);
}
.wa-gap-5xl {
gap: var(--wa-space-5xl);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/text.css */
@layer wa-utilities {
[class*=wa-body] {
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
}
[class*=wa-heading] {
font-family: var(--wa-font-family-heading);
font-weight: var(--wa-font-weight-heading);
line-height: var(--wa-line-height-condensed);
text-wrap: balance;
}
[class*=wa-caption] {
color: var(--wa-color-text-quiet);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-condensed);
}
[class*=wa-longform] {
font-family: var(--wa-font-family-longform);
font-weight: var(--wa-font-weight-longform);
line-height: var(--wa-line-height-normal);
}
.wa-font-size-3xs,
.wa-body-3xs,
.wa-heading-3xs,
.wa-caption-3xs,
.wa-longform-3xs {
font-size: var(--wa-font-size-3xs);
}
.wa-font-size-2xs,
.wa-body-2xs,
.wa-heading-2xs,
.wa-caption-2xs,
.wa-longform-2xs {
font-size: var(--wa-font-size-2xs);
}
.wa-font-size-xs,
.wa-body-xs,
.wa-heading-xs,
.wa-caption-xs,
.wa-longform-xs {
font-size: var(--wa-font-size-xs);
}
.wa-font-size-s,
.wa-body-s,
.wa-heading-s,
.wa-caption-s,
.wa-longform-s {
font-size: var(--wa-font-size-s);
}
.wa-font-size-m,
.wa-body-m,
.wa-heading-m,
.wa-caption-m,
.wa-longform-m {
font-size: var(--wa-font-size-m);
}
.wa-font-size-l,
.wa-body-l,
.wa-heading-l,
.wa-caption-l,
.wa-longform-l {
font-size: var(--wa-font-size-l);
}
.wa-font-size-xl,
.wa-body-xl,
.wa-heading-xl,
.wa-caption-xl,
.wa-longform-xl {
font-size: var(--wa-font-size-xl);
}
.wa-font-size-2xl,
.wa-body-2xl,
.wa-heading-2xl,
.wa-caption-2xl,
.wa-longform-2xl {
font-size: var(--wa-font-size-2xl);
}
.wa-font-size-3xl,
.wa-body-3xl,
.wa-heading-3xl,
.wa-caption-3xl,
.wa-longform-3xl {
font-size: var(--wa-font-size-3xl);
}
.wa-font-size-4xl,
.wa-body-4xl,
.wa-heading-4xl,
.wa-caption-4xl,
.wa-longform-4xl {
font-size: var(--wa-font-size-4xl);
}
.wa-font-size-5xl,
.wa-body-5xl,
.wa-heading-5xl,
.wa-caption-5xl,
.wa-longform-5xl {
font-size: var(--wa-font-size-5xl);
}
.wa-font-weight-light {
font-weight: var(--wa-font-weight-light);
}
.wa-font-weight-normal {
font-weight: var(--wa-font-weight-normal);
}
.wa-font-weight-semibold {
font-weight: var(--wa-font-weight-semibold);
}
.wa-font-weight-bold {
font-weight: var(--wa-font-weight-bold);
}
.wa-color-text-normal {
color: var(--wa-color-text-normal);
}
.wa-color-text-quiet {
color: var(--wa-color-text-quiet);
}
.wa-color-text-link {
color: var(--wa-color-text-link);
}
.wa-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wa-text-nowrap,
.wa-text-wrap-nowrap {
text-wrap: nowrap;
}
.wa-text-balance,
.wa-text-wrap-balance {
text-wrap: balance;
}
@supports (text-wrap: pretty) {
.wa-text-pretty,
.wa-text-wrap-pretty {
text-wrap: pretty;
}
}
.wa-text-uppercase {
text-transform: uppercase;
}
.wa-text-lowercase {
text-transform: lowercase;
}
.wa-text-capitalize {
text-transform: capitalize;
}
.wa-text-start {
text-align: start;
}
.wa-text-center {
text-align: center;
}
.wa-text-end {
text-align: end;
}
.wa-text-justify {
text-align: justify;
}
.wa-link {
color: var(--wa-color-text-link);
text-decoration: var(--wa-link-decoration-default);
-webkit-text-decoration: var(--wa-link-decoration-default);
@media (hover: hover) {
&:hover {
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
text-decoration: var(--wa-link-decoration-hover);
-webkit-text-decoration: var(--wa-link-decoration-hover);
}
}
}
.wa-link-plain {
color: var(--wa-color-text-normal);
text-decoration: none;
@media (hover: hover) {
&:hover {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
text-decoration: none;
}
}
}
.wa-list-plain:is(ol, ul) {
list-style: none;
padding-inline-start: 0;
> li {
margin-inline-start: 0;
}
}
.wa-form-control-label {
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
}
.wa-form-control-value {
color: var(--wa-form-control-value-color);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
}
.wa-form-control-placeholder {
color: var(--wa-form-control-placeholder-color);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
}
.wa-form-control-hint {
color: var(--wa-form-control-hint-color);
font-weight: var(--wa-form-control-hint-font-weight);
font-size: var(--wa-font-size-smaller);
line-height: var(--wa-form-control-hint-line-height);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/layout.css */
@layer wa-utilities {
:is([class*=wa-cluster], [class*=wa-flank], [class*=wa-frame], [class*=wa-grid], [class*=wa-stack], [class*=wa-split]) > * {
margin-block: 0;
margin-inline: 0;
}
:where([class*=wa-cluster], [class*=wa-flank], [class*=wa-frame], [class*=wa-grid], [class*=wa-stack], [class*=wa-split]) {
gap: var(--wa-space-m);
}
[class*=wa-cluster] {
display: flex;
}
:where([class*=wa-cluster]) {
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
[class*=wa-flank] {
display: flex;
--content-percentage: initial;
--flank-size: initial;
}
[class*=wa-flank]:not([class*=":end"]) > :first-child,
[class*=wa-flank][class*=":start"] > :first-child {
flex-basis: var(--flank-size, auto);
flex-grow: 1;
}
[class*=wa-flank]:not([class*=":end"]) > :last-child,
[class*=wa-flank][class*=":start"] > :last-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: var(--content-percentage, 50%);
}
[class*=wa-flank][class*=":end"] > :last-child {
flex-basis: var(--flank-size, auto);
flex-grow: 1;
}
[class*=wa-flank][class*=":end"] > :first-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: var(--content-percentage, 50%);
}
:where([class*=wa-flank]) {
align-items: center;
flex-wrap: wrap;
}
[class*=wa-frame] {
display: flex;
aspect-ratio: 1 / 1;
overflow: hidden;
}
[class*=wa-frame] > img,
[class*=wa-frame] > video {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
}
[class*=wa-frame][class*=":square"] {
aspect-ratio: 1 / 1;
}
[class*=wa-frame][class*=":landscape"] {
aspect-ratio: 16 / 9;
}
[class*=wa-frame][class*=":portrait"] {
aspect-ratio: 9 / 16;
}
:where([class*=wa-frame]) {
align-items: center;
justify-content: center;
}
[class*=wa-grid] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
--min-column-size: initial;
}
.wa-span-grid {
grid-column: 1 / -1;
}
[class*=wa-split] {
display: flex;
}
[class*=wa-split],
[class*=wa-split][class*=":row"] {
flex-direction: row;
block-size: auto;
inline-size: 100%;
}
[class*=wa-split]:not([class*=":column"]) > :first-child {
flex: 0 1 auto;
}
[class*=wa-split][class*=":column"] {
flex-direction: column;
block-size: auto;
inline-size: auto;
align-self: stretch;
}
:where([class*=wa-split]) {
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
[class*=wa-stack] {
display: flex;
flex-direction: column;
}
:where([class*=wa-stack]) {
align-items: stretch;
justify-content: flex-start;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/prose.css */
@layer wa-utilities {
:where(.wa-prose) {
--wa-prose-rhythm-scale: 1;
--wa-prose-rhythm-2xs: calc(0.25em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-xs: calc(0.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-s: calc(0.75em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-m: calc(1em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-l: calc(1.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-xl: calc(2em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-2xl: calc(2.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-rhythm-3xl: calc(3em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
--wa-prose-line-length: 65ch;
max-inline-size: var(--wa-prose-line-length);
font-variant-numeric: oldstyle-nums proportional-nums;
hanging-punctuation: first last allow-end;
& :where(h1) {
font-size: 2.5625em;
}
& :where(h2) {
font-size: 2em;
}
& :where(h3) {
font-size: 1.5625em;
}
& :where(h4) {
font-size: 1.25em;
}
& :where(h5) {
font-size: 1em;
}
& :where(h6) {
font-size: 0.75em;
}
& :where(h1, h2) {
letter-spacing: -0.01em;
}
& :where(h1):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-s);
}
& * + :where(h2) {
margin-block-start: var(--wa-prose-rhythm-2xl);
}
& :where(h2):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-s);
}
& * + :where(h3) {
margin-block-start: var(--wa-prose-rhythm-xl);
}
& :where(h3):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-s);
}
& :where(h4, h5, h6):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-xs);
}
& :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
margin-block-start: var(--wa-prose-rhythm-m);
}
& :where(p, ul, ol, dl):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-l);
}
& :where(ul, ol) > :where(li):has(+ li) {
margin-block-end: var(--wa-prose-rhythm-2xs);
}
& :where(dd):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-s);
}
& :where(figcaption) {
margin-block-start: var(--wa-prose-rhythm-xs);
}
& :where(code, pre) {
overflow-wrap: anywhere;
}
& :where(hr) {
margin-block: var(--wa-prose-rhythm-3xl);
}
& :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
margin-block-start: 0;
}
& :where(pre, figure, table, blockquote, wa-callout, details):has(+ *) {
margin-block-end: var(--wa-prose-rhythm-xl);
}
& :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
margin-block-start: var(--wa-prose-rhythm-xl);
}
& :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
margin-block-start: var(--wa-prose-rhythm-m);
}
}
.wa-not-prose,
.wa-not-prose * {
margin-block-start: revert-layer;
margin-block-end: revert-layer;
font-size: revert-layer;
letter-spacing: revert-layer;
font-variant-numeric: revert-layer;
hanging-punctuation: revert-layer;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/size.css */
@layer wa-utilities {
.wa-size-xs {
font-size: var(--wa-font-size-xs);
}
.wa-size-s {
font-size: var(--wa-font-size-s);
}
.wa-size-m {
font-size: var(--wa-font-size-m);
}
.wa-size-l {
font-size: var(--wa-font-size-l);
}
.wa-size-xl {
font-size: var(--wa-font-size-xl);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities/variants.css */
@layer wa-utilities {
:where(:root),
.wa-neutral {
--wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
--wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
--wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
--wa-color-border-loud: var(--wa-color-neutral-border-loud);
--wa-color-border-normal: var(--wa-color-neutral-border-normal);
--wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
--wa-color-on-loud: var(--wa-color-neutral-on-loud);
--wa-color-on-normal: var(--wa-color-neutral-on-normal);
--wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
}
.wa-brand {
--wa-color-fill-loud: var(--wa-color-brand-fill-loud);
--wa-color-fill-normal: var(--wa-color-brand-fill-normal);
--wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
--wa-color-border-loud: var(--wa-color-brand-border-loud);
--wa-color-border-normal: var(--wa-color-brand-border-normal);
--wa-color-border-quiet: var(--wa-color-brand-border-quiet);
--wa-color-on-loud: var(--wa-color-brand-on-loud);
--wa-color-on-normal: var(--wa-color-brand-on-normal);
--wa-color-on-quiet: var(--wa-color-brand-on-quiet);
}
.wa-success {
--wa-color-fill-loud: var(--wa-color-success-fill-loud);
--wa-color-fill-normal: var(--wa-color-success-fill-normal);
--wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
--wa-color-border-loud: var(--wa-color-success-border-loud);
--wa-color-border-normal: var(--wa-color-success-border-normal);
--wa-color-border-quiet: var(--wa-color-success-border-quiet);
--wa-color-on-loud: var(--wa-color-success-on-loud);
--wa-color-on-normal: var(--wa-color-success-on-normal);
--wa-color-on-quiet: var(--wa-color-success-on-quiet);
}
.wa-warning {
--wa-color-fill-loud: var(--wa-color-warning-fill-loud);
--wa-color-fill-normal: var(--wa-color-warning-fill-normal);
--wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
--wa-color-border-loud: var(--wa-color-warning-border-loud);
--wa-color-border-normal: var(--wa-color-warning-border-normal);
--wa-color-border-quiet: var(--wa-color-warning-border-quiet);
--wa-color-on-loud: var(--wa-color-warning-on-loud);
--wa-color-on-normal: var(--wa-color-warning-on-normal);
--wa-color-on-quiet: var(--wa-color-warning-on-quiet);
}
.wa-danger {
--wa-color-fill-loud: var(--wa-color-danger-fill-loud);
--wa-color-fill-normal: var(--wa-color-danger-fill-normal);
--wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
--wa-color-border-loud: var(--wa-color-danger-border-loud);
--wa-color-border-normal: var(--wa-color-danger-border-normal);
--wa-color-border-quiet: var(--wa-color-danger-border-quiet);
--wa-color-on-loud: var(--wa-color-danger-on-loud);
--wa-color-on-normal: var(--wa-color-danger-on-normal);
--wa-color-on-quiet: var(--wa-color-danger-on-quiet);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/utilities.css */
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/layers.css */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
@layer wa-base {
wa-page :is(*, *:after, *:before) {
scroll-margin-top: var(--scroll-margin-top);
}
wa-page[view=desktop] [data-toggle-nav] {
display: none;
}
wa-page[view=mobile] .wa-desktop-only,
wa-page[view=desktop] .wa-mobile-only {
display: none !important;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants/brand.css */
@layer wa-color-variant {
:where(:root),
.wa-brand-blue {
--wa-color-brand-95: var(--wa-color-blue-95);
--wa-color-brand-90: var(--wa-color-blue-90);
--wa-color-brand-80: var(--wa-color-blue-80);
--wa-color-brand-70: var(--wa-color-blue-70);
--wa-color-brand-60: var(--wa-color-blue-60);
--wa-color-brand-50: var(--wa-color-blue-50);
--wa-color-brand-40: var(--wa-color-blue-40);
--wa-color-brand-30: var(--wa-color-blue-30);
--wa-color-brand-20: var(--wa-color-blue-20);
--wa-color-brand-10: var(--wa-color-blue-10);
--wa-color-brand-05: var(--wa-color-blue-05);
--wa-color-brand: var(--wa-color-blue);
--wa-color-brand-on: var(--wa-color-blue-on);
}
.wa-brand-red {
--wa-color-brand-95: var(--wa-color-red-95);
--wa-color-brand-90: var(--wa-color-red-90);
--wa-color-brand-80: var(--wa-color-red-80);
--wa-color-brand-70: var(--wa-color-red-70);
--wa-color-brand-60: var(--wa-color-red-60);
--wa-color-brand-50: var(--wa-color-red-50);
--wa-color-brand-40: var(--wa-color-red-40);
--wa-color-brand-30: var(--wa-color-red-30);
--wa-color-brand-20: var(--wa-color-red-20);
--wa-color-brand-10: var(--wa-color-red-10);
--wa-color-brand-05: var(--wa-color-red-05);
--wa-color-brand: var(--wa-color-red);
--wa-color-brand-on: var(--wa-color-red-on);
}
.wa-brand-orange {
--wa-color-brand-95: var(--wa-color-orange-95);
--wa-color-brand-90: var(--wa-color-orange-90);
--wa-color-brand-80: var(--wa-color-orange-80);
--wa-color-brand-70: var(--wa-color-orange-70);
--wa-color-brand-60: var(--wa-color-orange-60);
--wa-color-brand-50: var(--wa-color-orange-50);
--wa-color-brand-40: var(--wa-color-orange-40);
--wa-color-brand-30: var(--wa-color-orange-30);
--wa-color-brand-20: var(--wa-color-orange-20);
--wa-color-brand-10: var(--wa-color-orange-10);
--wa-color-brand-05: var(--wa-color-orange-05);
--wa-color-brand: var(--wa-color-orange);
--wa-color-brand-on: var(--wa-color-orange-on);
}
.wa-brand-yellow {
--wa-color-brand-95: var(--wa-color-yellow-95);
--wa-color-brand-90: var(--wa-color-yellow-90);
--wa-color-brand-80: var(--wa-color-yellow-80);
--wa-color-brand-70: var(--wa-color-yellow-70);
--wa-color-brand-60: var(--wa-color-yellow-60);
--wa-color-brand-50: var(--wa-color-yellow-50);
--wa-color-brand-40: var(--wa-color-yellow-40);
--wa-color-brand-30: var(--wa-color-yellow-30);
--wa-color-brand-20: var(--wa-color-yellow-20);
--wa-color-brand-10: var(--wa-color-yellow-10);
--wa-color-brand-05: var(--wa-color-yellow-05);
--wa-color-brand: var(--wa-color-yellow);
--wa-color-brand-on: var(--wa-color-yellow-on);
}
.wa-brand-green {
--wa-color-brand-95: var(--wa-color-green-95);
--wa-color-brand-90: var(--wa-color-green-90);
--wa-color-brand-80: var(--wa-color-green-80);
--wa-color-brand-70: var(--wa-color-green-70);
--wa-color-brand-60: var(--wa-color-green-60);
--wa-color-brand-50: var(--wa-color-green-50);
--wa-color-brand-40: var(--wa-color-green-40);
--wa-color-brand-30: var(--wa-color-green-30);
--wa-color-brand-20: var(--wa-color-green-20);
--wa-color-brand-10: var(--wa-color-green-10);
--wa-color-brand-05: var(--wa-color-green-05);
--wa-color-brand: var(--wa-color-green);
--wa-color-brand-on: var(--wa-color-green-on);
}
.wa-brand-cyan {
--wa-color-brand-95: var(--wa-color-cyan-95);
--wa-color-brand-90: var(--wa-color-cyan-90);
--wa-color-brand-80: var(--wa-color-cyan-80);
--wa-color-brand-70: var(--wa-color-cyan-70);
--wa-color-brand-60: var(--wa-color-cyan-60);
--wa-color-brand-50: var(--wa-color-cyan-50);
--wa-color-brand-40: var(--wa-color-cyan-40);
--wa-color-brand-30: var(--wa-color-cyan-30);
--wa-color-brand-20: var(--wa-color-cyan-20);
--wa-color-brand-10: var(--wa-color-cyan-10);
--wa-color-brand-05: var(--wa-color-cyan-05);
--wa-color-brand: var(--wa-color-cyan);
--wa-color-brand-on: var(--wa-color-cyan-on);
}
.wa-brand-indigo {
--wa-color-brand-95: var(--wa-color-indigo-95);
--wa-color-brand-90: var(--wa-color-indigo-90);
--wa-color-brand-80: var(--wa-color-indigo-80);
--wa-color-brand-70: var(--wa-color-indigo-70);
--wa-color-brand-60: var(--wa-color-indigo-60);
--wa-color-brand-50: var(--wa-color-indigo-50);
--wa-color-brand-40: var(--wa-color-indigo-40);
--wa-color-brand-30: var(--wa-color-indigo-30);
--wa-color-brand-20: var(--wa-color-indigo-20);
--wa-color-brand-10: var(--wa-color-indigo-10);
--wa-color-brand-05: var(--wa-color-indigo-05);
--wa-color-brand: var(--wa-color-indigo);
--wa-color-brand-on: var(--wa-color-indigo-on);
}
.wa-brand-purple {
--wa-color-brand-95: var(--wa-color-purple-95);
--wa-color-brand-90: var(--wa-color-purple-90);
--wa-color-brand-80: var(--wa-color-purple-80);
--wa-color-brand-70: var(--wa-color-purple-70);
--wa-color-brand-60: var(--wa-color-purple-60);
--wa-color-brand-50: var(--wa-color-purple-50);
--wa-color-brand-40: var(--wa-color-purple-40);
--wa-color-brand-30: var(--wa-color-purple-30);
--wa-color-brand-20: var(--wa-color-purple-20);
--wa-color-brand-10: var(--wa-color-purple-10);
--wa-color-brand-05: var(--wa-color-purple-05);
--wa-color-brand: var(--wa-color-purple);
--wa-color-brand-on: var(--wa-color-purple-on);
}
.wa-brand-pink {
--wa-color-brand-95: var(--wa-color-pink-95);
--wa-color-brand-90: var(--wa-color-pink-90);
--wa-color-brand-80: var(--wa-color-pink-80);
--wa-color-brand-70: var(--wa-color-pink-70);
--wa-color-brand-60: var(--wa-color-pink-60);
--wa-color-brand-50: var(--wa-color-pink-50);
--wa-color-brand-40: var(--wa-color-pink-40);
--wa-color-brand-30: var(--wa-color-pink-30);
--wa-color-brand-20: var(--wa-color-pink-20);
--wa-color-brand-10: var(--wa-color-pink-10);
--wa-color-brand-05: var(--wa-color-pink-05);
--wa-color-brand: var(--wa-color-pink);
--wa-color-brand-on: var(--wa-color-pink-on);
}
.wa-brand-gray {
--wa-color-brand-95: var(--wa-color-gray-95);
--wa-color-brand-90: var(--wa-color-gray-90);
--wa-color-brand-80: var(--wa-color-gray-80);
--wa-color-brand-70: var(--wa-color-gray-70);
--wa-color-brand-60: var(--wa-color-gray-60);
--wa-color-brand-50: var(--wa-color-gray-50);
--wa-color-brand-40: var(--wa-color-gray-40);
--wa-color-brand-30: var(--wa-color-gray-30);
--wa-color-brand-20: var(--wa-color-gray-20);
--wa-color-brand-10: var(--wa-color-gray-10);
--wa-color-brand-05: var(--wa-color-gray-05);
--wa-color-brand: var(--wa-color-gray);
--wa-color-brand-on: var(--wa-color-gray-on);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants/neutral.css */
@layer wa-color-variant {
:where(:root),
.wa-neutral-gray {
--wa-color-neutral-95: var(--wa-color-gray-95);
--wa-color-neutral-90: var(--wa-color-gray-90);
--wa-color-neutral-80: var(--wa-color-gray-80);
--wa-color-neutral-70: var(--wa-color-gray-70);
--wa-color-neutral-60: var(--wa-color-gray-60);
--wa-color-neutral-50: var(--wa-color-gray-50);
--wa-color-neutral-40: var(--wa-color-gray-40);
--wa-color-neutral-30: var(--wa-color-gray-30);
--wa-color-neutral-20: var(--wa-color-gray-20);
--wa-color-neutral-10: var(--wa-color-gray-10);
--wa-color-neutral-05: var(--wa-color-gray-05);
--wa-color-neutral: var(--wa-color-gray);
--wa-color-neutral-on: var(--wa-color-gray-on);
}
.wa-neutral-red {
--wa-color-neutral-95: var(--wa-color-red-95);
--wa-color-neutral-90: var(--wa-color-red-90);
--wa-color-neutral-80: var(--wa-color-red-80);
--wa-color-neutral-70: var(--wa-color-red-70);
--wa-color-neutral-60: var(--wa-color-red-60);
--wa-color-neutral-50: var(--wa-color-red-50);
--wa-color-neutral-40: var(--wa-color-red-40);
--wa-color-neutral-30: var(--wa-color-red-30);
--wa-color-neutral-20: var(--wa-color-red-20);
--wa-color-neutral-10: var(--wa-color-red-10);
--wa-color-neutral-05: var(--wa-color-red-05);
--wa-color-neutral: var(--wa-color-red);
--wa-color-neutral-on: var(--wa-color-red-on);
}
.wa-neutral-orange {
--wa-color-neutral-95: var(--wa-color-orange-95);
--wa-color-neutral-90: var(--wa-color-orange-90);
--wa-color-neutral-80: var(--wa-color-orange-80);
--wa-color-neutral-70: var(--wa-color-orange-70);
--wa-color-neutral-60: var(--wa-color-orange-60);
--wa-color-neutral-50: var(--wa-color-orange-50);
--wa-color-neutral-40: var(--wa-color-orange-40);
--wa-color-neutral-30: var(--wa-color-orange-30);
--wa-color-neutral-20: var(--wa-color-orange-20);
--wa-color-neutral-10: var(--wa-color-orange-10);
--wa-color-neutral-05: var(--wa-color-orange-05);
--wa-color-neutral: var(--wa-color-orange);
--wa-color-neutral-on: var(--wa-color-orange-on);
}
.wa-neutral-yellow {
--wa-color-neutral-95: var(--wa-color-yellow-95);
--wa-color-neutral-90: var(--wa-color-yellow-90);
--wa-color-neutral-80: var(--wa-color-yellow-80);
--wa-color-neutral-70: var(--wa-color-yellow-70);
--wa-color-neutral-60: var(--wa-color-yellow-60);
--wa-color-neutral-50: var(--wa-color-yellow-50);
--wa-color-neutral-40: var(--wa-color-yellow-40);
--wa-color-neutral-30: var(--wa-color-yellow-30);
--wa-color-neutral-20: var(--wa-color-yellow-20);
--wa-color-neutral-10: var(--wa-color-yellow-10);
--wa-color-neutral-05: var(--wa-color-yellow-05);
--wa-color-neutral: var(--wa-color-yellow);
--wa-color-neutral-on: var(--wa-color-yellow-on);
}
.wa-neutral-green {
--wa-color-neutral-95: var(--wa-color-green-95);
--wa-color-neutral-90: var(--wa-color-green-90);
--wa-color-neutral-80: var(--wa-color-green-80);
--wa-color-neutral-70: var(--wa-color-green-70);
--wa-color-neutral-60: var(--wa-color-green-60);
--wa-color-neutral-50: var(--wa-color-green-50);
--wa-color-neutral-40: var(--wa-color-green-40);
--wa-color-neutral-30: var(--wa-color-green-30);
--wa-color-neutral-20: var(--wa-color-green-20);
--wa-color-neutral-10: var(--wa-color-green-10);
--wa-color-neutral-05: var(--wa-color-green-05);
--wa-color-neutral: var(--wa-color-green);
--wa-color-neutral-on: var(--wa-color-green-on);
}
.wa-neutral-cyan {
--wa-color-neutral-95: var(--wa-color-cyan-95);
--wa-color-neutral-90: var(--wa-color-cyan-90);
--wa-color-neutral-80: var(--wa-color-cyan-80);
--wa-color-neutral-70: var(--wa-color-cyan-70);
--wa-color-neutral-60: var(--wa-color-cyan-60);
--wa-color-neutral-50: var(--wa-color-cyan-50);
--wa-color-neutral-40: var(--wa-color-cyan-40);
--wa-color-neutral-30: var(--wa-color-cyan-30);
--wa-color-neutral-20: var(--wa-color-cyan-20);
--wa-color-neutral-10: var(--wa-color-cyan-10);
--wa-color-neutral-05: var(--wa-color-cyan-05);
--wa-color-neutral: var(--wa-color-cyan);
--wa-color-neutral-on: var(--wa-color-cyan-on);
}
.wa-neutral-blue {
--wa-color-neutral-95: var(--wa-color-blue-95);
--wa-color-neutral-90: var(--wa-color-blue-90);
--wa-color-neutral-80: var(--wa-color-blue-80);
--wa-color-neutral-70: var(--wa-color-blue-70);
--wa-color-neutral-60: var(--wa-color-blue-60);
--wa-color-neutral-50: var(--wa-color-blue-50);
--wa-color-neutral-40: var(--wa-color-blue-40);
--wa-color-neutral-30: var(--wa-color-blue-30);
--wa-color-neutral-20: var(--wa-color-blue-20);
--wa-color-neutral-10: var(--wa-color-blue-10);
--wa-color-neutral-05: var(--wa-color-blue-05);
--wa-color-neutral: var(--wa-color-blue);
--wa-color-neutral-on: var(--wa-color-blue-on);
}
.wa-neutral-indigo {
--wa-color-neutral-95: var(--wa-color-indigo-95);
--wa-color-neutral-90: var(--wa-color-indigo-90);
--wa-color-neutral-80: var(--wa-color-indigo-80);
--wa-color-neutral-70: var(--wa-color-indigo-70);
--wa-color-neutral-60: var(--wa-color-indigo-60);
--wa-color-neutral-50: var(--wa-color-indigo-50);
--wa-color-neutral-40: var(--wa-color-indigo-40);
--wa-color-neutral-30: var(--wa-color-indigo-30);
--wa-color-neutral-20: var(--wa-color-indigo-20);
--wa-color-neutral-10: var(--wa-color-indigo-10);
--wa-color-neutral-05: var(--wa-color-indigo-05);
--wa-color-neutral: var(--wa-color-indigo);
--wa-color-neutral-on: var(--wa-color-indigo-on);
}
.wa-neutral-purple {
--wa-color-neutral-95: var(--wa-color-purple-95);
--wa-color-neutral-90: var(--wa-color-purple-90);
--wa-color-neutral-80: var(--wa-color-purple-80);
--wa-color-neutral-70: var(--wa-color-purple-70);
--wa-color-neutral-60: var(--wa-color-purple-60);
--wa-color-neutral-50: var(--wa-color-purple-50);
--wa-color-neutral-40: var(--wa-color-purple-40);
--wa-color-neutral-30: var(--wa-color-purple-30);
--wa-color-neutral-20: var(--wa-color-purple-20);
--wa-color-neutral-10: var(--wa-color-purple-10);
--wa-color-neutral-05: var(--wa-color-purple-05);
--wa-color-neutral: var(--wa-color-purple);
--wa-color-neutral-on: var(--wa-color-purple-on);
}
.wa-neutral-pink {
--wa-color-neutral-95: var(--wa-color-pink-95);
--wa-color-neutral-90: var(--wa-color-pink-90);
--wa-color-neutral-80: var(--wa-color-pink-80);
--wa-color-neutral-70: var(--wa-color-pink-70);
--wa-color-neutral-60: var(--wa-color-pink-60);
--wa-color-neutral-50: var(--wa-color-pink-50);
--wa-color-neutral-40: var(--wa-color-pink-40);
--wa-color-neutral-30: var(--wa-color-pink-30);
--wa-color-neutral-20: var(--wa-color-pink-20);
--wa-color-neutral-10: var(--wa-color-pink-10);
--wa-color-neutral-05: var(--wa-color-pink-05);
--wa-color-neutral: var(--wa-color-pink);
--wa-color-neutral-on: var(--wa-color-pink-on);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants/success.css */
@layer wa-color-variant {
:where(:root),
.wa-success-green {
--wa-color-success-95: var(--wa-color-green-95);
--wa-color-success-90: var(--wa-color-green-90);
--wa-color-success-80: var(--wa-color-green-80);
--wa-color-success-70: var(--wa-color-green-70);
--wa-color-success-60: var(--wa-color-green-60);
--wa-color-success-50: var(--wa-color-green-50);
--wa-color-success-40: var(--wa-color-green-40);
--wa-color-success-30: var(--wa-color-green-30);
--wa-color-success-20: var(--wa-color-green-20);
--wa-color-success-10: var(--wa-color-green-10);
--wa-color-success-05: var(--wa-color-green-05);
--wa-color-success: var(--wa-color-green);
--wa-color-success-on: var(--wa-color-green-on);
}
.wa-success-red {
--wa-color-success-95: var(--wa-color-red-95);
--wa-color-success-90: var(--wa-color-red-90);
--wa-color-success-80: var(--wa-color-red-80);
--wa-color-success-70: var(--wa-color-red-70);
--wa-color-success-60: var(--wa-color-red-60);
--wa-color-success-50: var(--wa-color-red-50);
--wa-color-success-40: var(--wa-color-red-40);
--wa-color-success-30: var(--wa-color-red-30);
--wa-color-success-20: var(--wa-color-red-20);
--wa-color-success-10: var(--wa-color-red-10);
--wa-color-success-05: var(--wa-color-red-05);
--wa-color-success: var(--wa-color-red);
--wa-color-success-on: var(--wa-color-red-on);
}
.wa-success-orange {
--wa-color-success-95: var(--wa-color-orange-95);
--wa-color-success-90: var(--wa-color-orange-90);
--wa-color-success-80: var(--wa-color-orange-80);
--wa-color-success-70: var(--wa-color-orange-70);
--wa-color-success-60: var(--wa-color-orange-60);
--wa-color-success-50: var(--wa-color-orange-50);
--wa-color-success-40: var(--wa-color-orange-40);
--wa-color-success-30: var(--wa-color-orange-30);
--wa-color-success-20: var(--wa-color-orange-20);
--wa-color-success-10: var(--wa-color-orange-10);
--wa-color-success-05: var(--wa-color-orange-05);
--wa-color-success: var(--wa-color-orange);
--wa-color-success-on: var(--wa-color-orange-on);
}
.wa-success-yellow {
--wa-color-success-95: var(--wa-color-yellow-95);
--wa-color-success-90: var(--wa-color-yellow-90);
--wa-color-success-80: var(--wa-color-yellow-80);
--wa-color-success-70: var(--wa-color-yellow-70);
--wa-color-success-60: var(--wa-color-yellow-60);
--wa-color-success-50: var(--wa-color-yellow-50);
--wa-color-success-40: var(--wa-color-yellow-40);
--wa-color-success-30: var(--wa-color-yellow-30);
--wa-color-success-20: var(--wa-color-yellow-20);
--wa-color-success-10: var(--wa-color-yellow-10);
--wa-color-success-05: var(--wa-color-yellow-05);
--wa-color-success: var(--wa-color-yellow);
--wa-color-success-on: var(--wa-color-yellow-on);
}
.wa-success-cyan {
--wa-color-success-95: var(--wa-color-cyan-95);
--wa-color-success-90: var(--wa-color-cyan-90);
--wa-color-success-80: var(--wa-color-cyan-80);
--wa-color-success-70: var(--wa-color-cyan-70);
--wa-color-success-60: var(--wa-color-cyan-60);
--wa-color-success-50: var(--wa-color-cyan-50);
--wa-color-success-40: var(--wa-color-cyan-40);
--wa-color-success-30: var(--wa-color-cyan-30);
--wa-color-success-20: var(--wa-color-cyan-20);
--wa-color-success-10: var(--wa-color-cyan-10);
--wa-color-success-05: var(--wa-color-cyan-05);
--wa-color-success: var(--wa-color-cyan);
--wa-color-success-on: var(--wa-color-cyan-on);
}
.wa-success-blue {
--wa-color-success-95: var(--wa-color-blue-95);
--wa-color-success-90: var(--wa-color-blue-90);
--wa-color-success-80: var(--wa-color-blue-80);
--wa-color-success-70: var(--wa-color-blue-70);
--wa-color-success-60: var(--wa-color-blue-60);
--wa-color-success-50: var(--wa-color-blue-50);
--wa-color-success-40: var(--wa-color-blue-40);
--wa-color-success-30: var(--wa-color-blue-30);
--wa-color-success-20: var(--wa-color-blue-20);
--wa-color-success-10: var(--wa-color-blue-10);
--wa-color-success-05: var(--wa-color-blue-05);
--wa-color-success: var(--wa-color-blue);
--wa-color-success-on: var(--wa-color-blue-on);
}
.wa-success-indigo {
--wa-color-success-95: var(--wa-color-indigo-95);
--wa-color-success-90: var(--wa-color-indigo-90);
--wa-color-success-80: var(--wa-color-indigo-80);
--wa-color-success-70: var(--wa-color-indigo-70);
--wa-color-success-60: var(--wa-color-indigo-60);
--wa-color-success-50: var(--wa-color-indigo-50);
--wa-color-success-40: var(--wa-color-indigo-40);
--wa-color-success-30: var(--wa-color-indigo-30);
--wa-color-success-20: var(--wa-color-indigo-20);
--wa-color-success-10: var(--wa-color-indigo-10);
--wa-color-success-05: var(--wa-color-indigo-05);
--wa-color-success: var(--wa-color-indigo);
--wa-color-success-on: var(--wa-color-indigo-on);
}
.wa-success-purple {
--wa-color-success-95: var(--wa-color-purple-95);
--wa-color-success-90: var(--wa-color-purple-90);
--wa-color-success-80: var(--wa-color-purple-80);
--wa-color-success-70: var(--wa-color-purple-70);
--wa-color-success-60: var(--wa-color-purple-60);
--wa-color-success-50: var(--wa-color-purple-50);
--wa-color-success-40: var(--wa-color-purple-40);
--wa-color-success-30: var(--wa-color-purple-30);
--wa-color-success-20: var(--wa-color-purple-20);
--wa-color-success-10: var(--wa-color-purple-10);
--wa-color-success-05: var(--wa-color-purple-05);
--wa-color-success: var(--wa-color-purple);
--wa-color-success-on: var(--wa-color-purple-on);
}
.wa-success-pink {
--wa-color-success-95: var(--wa-color-pink-95);
--wa-color-success-90: var(--wa-color-pink-90);
--wa-color-success-80: var(--wa-color-pink-80);
--wa-color-success-70: var(--wa-color-pink-70);
--wa-color-success-60: var(--wa-color-pink-60);
--wa-color-success-50: var(--wa-color-pink-50);
--wa-color-success-40: var(--wa-color-pink-40);
--wa-color-success-30: var(--wa-color-pink-30);
--wa-color-success-20: var(--wa-color-pink-20);
--wa-color-success-10: var(--wa-color-pink-10);
--wa-color-success-05: var(--wa-color-pink-05);
--wa-color-success: var(--wa-color-pink);
--wa-color-success-on: var(--wa-color-pink-on);
}
.wa-success-gray {
--wa-color-success-95: var(--wa-color-gray-95);
--wa-color-success-90: var(--wa-color-gray-90);
--wa-color-success-80: var(--wa-color-gray-80);
--wa-color-success-70: var(--wa-color-gray-70);
--wa-color-success-60: var(--wa-color-gray-60);
--wa-color-success-50: var(--wa-color-gray-50);
--wa-color-success-40: var(--wa-color-gray-40);
--wa-color-success-30: var(--wa-color-gray-30);
--wa-color-success-20: var(--wa-color-gray-20);
--wa-color-success-10: var(--wa-color-gray-10);
--wa-color-success-05: var(--wa-color-gray-05);
--wa-color-success: var(--wa-color-gray);
--wa-color-success-on: var(--wa-color-gray-on);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants/warning.css */
@layer wa-color-variant {
:where(:root),
.wa-warning-yellow {
--wa-color-warning-95: var(--wa-color-yellow-95);
--wa-color-warning-90: var(--wa-color-yellow-90);
--wa-color-warning-80: var(--wa-color-yellow-80);
--wa-color-warning-70: var(--wa-color-yellow-70);
--wa-color-warning-60: var(--wa-color-yellow-60);
--wa-color-warning-50: var(--wa-color-yellow-50);
--wa-color-warning-40: var(--wa-color-yellow-40);
--wa-color-warning-30: var(--wa-color-yellow-30);
--wa-color-warning-20: var(--wa-color-yellow-20);
--wa-color-warning-10: var(--wa-color-yellow-10);
--wa-color-warning-05: var(--wa-color-yellow-05);
--wa-color-warning: var(--wa-color-yellow);
--wa-color-warning-on: var(--wa-color-yellow-on);
}
.wa-warning-red {
--wa-color-warning-95: var(--wa-color-red-95);
--wa-color-warning-90: var(--wa-color-red-90);
--wa-color-warning-80: var(--wa-color-red-80);
--wa-color-warning-70: var(--wa-color-red-70);
--wa-color-warning-60: var(--wa-color-red-60);
--wa-color-warning-50: var(--wa-color-red-50);
--wa-color-warning-40: var(--wa-color-red-40);
--wa-color-warning-30: var(--wa-color-red-30);
--wa-color-warning-20: var(--wa-color-red-20);
--wa-color-warning-10: var(--wa-color-red-10);
--wa-color-warning-05: var(--wa-color-red-05);
--wa-color-warning: var(--wa-color-red);
--wa-color-warning-on: var(--wa-color-red-on);
}
.wa-warning-orange {
--wa-color-warning-95: var(--wa-color-orange-95);
--wa-color-warning-90: var(--wa-color-orange-90);
--wa-color-warning-80: var(--wa-color-orange-80);
--wa-color-warning-70: var(--wa-color-orange-70);
--wa-color-warning-60: var(--wa-color-orange-60);
--wa-color-warning-50: var(--wa-color-orange-50);
--wa-color-warning-40: var(--wa-color-orange-40);
--wa-color-warning-30: var(--wa-color-orange-30);
--wa-color-warning-20: var(--wa-color-orange-20);
--wa-color-warning-10: var(--wa-color-orange-10);
--wa-color-warning-05: var(--wa-color-orange-05);
--wa-color-warning: var(--wa-color-orange);
--wa-color-warning-on: var(--wa-color-orange-on);
}
.wa-warning-green {
--wa-color-warning-95: var(--wa-color-green-95);
--wa-color-warning-90: var(--wa-color-green-90);
--wa-color-warning-80: var(--wa-color-green-80);
--wa-color-warning-70: var(--wa-color-green-70);
--wa-color-warning-60: var(--wa-color-green-60);
--wa-color-warning-50: var(--wa-color-green-50);
--wa-color-warning-40: var(--wa-color-green-40);
--wa-color-warning-30: var(--wa-color-green-30);
--wa-color-warning-20: var(--wa-color-green-20);
--wa-color-warning-10: var(--wa-color-green-10);
--wa-color-warning-05: var(--wa-color-green-05);
--wa-color-warning: var(--wa-color-green);
--wa-color-warning-on: var(--wa-color-green-on);
}
.wa-warning-cyan {
--wa-color-warning-95: var(--wa-color-cyan-95);
--wa-color-warning-90: var(--wa-color-cyan-90);
--wa-color-warning-80: var(--wa-color-cyan-80);
--wa-color-warning-70: var(--wa-color-cyan-70);
--wa-color-warning-60: var(--wa-color-cyan-60);
--wa-color-warning-50: var(--wa-color-cyan-50);
--wa-color-warning-40: var(--wa-color-cyan-40);
--wa-color-warning-30: var(--wa-color-cyan-30);
--wa-color-warning-20: var(--wa-color-cyan-20);
--wa-color-warning-10: var(--wa-color-cyan-10);
--wa-color-warning-05: var(--wa-color-cyan-05);
--wa-color-warning: var(--wa-color-cyan);
--wa-color-warning-on: var(--wa-color-cyan-on);
}
.wa-warning-blue {
--wa-color-warning-95: var(--wa-color-blue-95);
--wa-color-warning-90: var(--wa-color-blue-90);
--wa-color-warning-80: var(--wa-color-blue-80);
--wa-color-warning-70: var(--wa-color-blue-70);
--wa-color-warning-60: var(--wa-color-blue-60);
--wa-color-warning-50: var(--wa-color-blue-50);
--wa-color-warning-40: var(--wa-color-blue-40);
--wa-color-warning-30: var(--wa-color-blue-30);
--wa-color-warning-20: var(--wa-color-blue-20);
--wa-color-warning-10: var(--wa-color-blue-10);
--wa-color-warning-05: var(--wa-color-blue-05);
--wa-color-warning: var(--wa-color-blue);
--wa-color-warning-on: var(--wa-color-blue-on);
}
.wa-warning-indigo {
--wa-color-warning-95: var(--wa-color-indigo-95);
--wa-color-warning-90: var(--wa-color-indigo-90);
--wa-color-warning-80: var(--wa-color-indigo-80);
--wa-color-warning-70: var(--wa-color-indigo-70);
--wa-color-warning-60: var(--wa-color-indigo-60);
--wa-color-warning-50: var(--wa-color-indigo-50);
--wa-color-warning-40: var(--wa-color-indigo-40);
--wa-color-warning-30: var(--wa-color-indigo-30);
--wa-color-warning-20: var(--wa-color-indigo-20);
--wa-color-warning-10: var(--wa-color-indigo-10);
--wa-color-warning-05: var(--wa-color-indigo-05);
--wa-color-warning: var(--wa-color-indigo);
--wa-color-warning-on: var(--wa-color-indigo-on);
}
.wa-warning-purple {
--wa-color-warning-95: var(--wa-color-purple-95);
--wa-color-warning-90: var(--wa-color-purple-90);
--wa-color-warning-80: var(--wa-color-purple-80);
--wa-color-warning-70: var(--wa-color-purple-70);
--wa-color-warning-60: var(--wa-color-purple-60);
--wa-color-warning-50: var(--wa-color-purple-50);
--wa-color-warning-40: var(--wa-color-purple-40);
--wa-color-warning-30: var(--wa-color-purple-30);
--wa-color-warning-20: var(--wa-color-purple-20);
--wa-color-warning-10: var(--wa-color-purple-10);
--wa-color-warning-05: var(--wa-color-purple-05);
--wa-color-warning: var(--wa-color-purple);
--wa-color-warning-on: var(--wa-color-purple-on);
}
.wa-warning-pink {
--wa-color-warning-95: var(--wa-color-pink-95);
--wa-color-warning-90: var(--wa-color-pink-90);
--wa-color-warning-80: var(--wa-color-pink-80);
--wa-color-warning-70: var(--wa-color-pink-70);
--wa-color-warning-60: var(--wa-color-pink-60);
--wa-color-warning-50: var(--wa-color-pink-50);
--wa-color-warning-40: var(--wa-color-pink-40);
--wa-color-warning-30: var(--wa-color-pink-30);
--wa-color-warning-20: var(--wa-color-pink-20);
--wa-color-warning-10: var(--wa-color-pink-10);
--wa-color-warning-05: var(--wa-color-pink-05);
--wa-color-warning: var(--wa-color-pink);
--wa-color-warning-on: var(--wa-color-pink-on);
}
.wa-warning-gray {
--wa-color-warning-95: var(--wa-color-gray-95);
--wa-color-warning-90: var(--wa-color-gray-90);
--wa-color-warning-80: var(--wa-color-gray-80);
--wa-color-warning-70: var(--wa-color-gray-70);
--wa-color-warning-60: var(--wa-color-gray-60);
--wa-color-warning-50: var(--wa-color-gray-50);
--wa-color-warning-40: var(--wa-color-gray-40);
--wa-color-warning-30: var(--wa-color-gray-30);
--wa-color-warning-20: var(--wa-color-gray-20);
--wa-color-warning-10: var(--wa-color-gray-10);
--wa-color-warning-05: var(--wa-color-gray-05);
--wa-color-warning: var(--wa-color-gray);
--wa-color-warning-on: var(--wa-color-gray-on);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants/danger.css */
@layer wa-color-variant {
:where(:root),
.wa-danger-red {
--wa-color-danger-95: var(--wa-color-red-95);
--wa-color-danger-90: var(--wa-color-red-90);
--wa-color-danger-80: var(--wa-color-red-80);
--wa-color-danger-70: var(--wa-color-red-70);
--wa-color-danger-60: var(--wa-color-red-60);
--wa-color-danger-50: var(--wa-color-red-50);
--wa-color-danger-40: var(--wa-color-red-40);
--wa-color-danger-30: var(--wa-color-red-30);
--wa-color-danger-20: var(--wa-color-red-20);
--wa-color-danger-10: var(--wa-color-red-10);
--wa-color-danger-05: var(--wa-color-red-05);
--wa-color-danger: var(--wa-color-red);
--wa-color-danger-on: var(--wa-color-red-on);
}
.wa-danger-orange {
--wa-color-danger-95: var(--wa-color-orange-95);
--wa-color-danger-90: var(--wa-color-orange-90);
--wa-color-danger-80: var(--wa-color-orange-80);
--wa-color-danger-70: var(--wa-color-orange-70);
--wa-color-danger-60: var(--wa-color-orange-60);
--wa-color-danger-50: var(--wa-color-orange-50);
--wa-color-danger-40: var(--wa-color-orange-40);
--wa-color-danger-30: var(--wa-color-orange-30);
--wa-color-danger-20: var(--wa-color-orange-20);
--wa-color-danger-10: var(--wa-color-orange-10);
--wa-color-danger-05: var(--wa-color-orange-05);
--wa-color-danger: var(--wa-color-orange);
--wa-color-danger-on: var(--wa-color-orange-on);
}
.wa-danger-yellow {
--wa-color-danger-95: var(--wa-color-yellow-95);
--wa-color-danger-90: var(--wa-color-yellow-90);
--wa-color-danger-80: var(--wa-color-yellow-80);
--wa-color-danger-70: var(--wa-color-yellow-70);
--wa-color-danger-60: var(--wa-color-yellow-60);
--wa-color-danger-50: var(--wa-color-yellow-50);
--wa-color-danger-40: var(--wa-color-yellow-40);
--wa-color-danger-30: var(--wa-color-yellow-30);
--wa-color-danger-20: var(--wa-color-yellow-20);
--wa-color-danger-10: var(--wa-color-yellow-10);
--wa-color-danger-05: var(--wa-color-yellow-05);
--wa-color-danger: var(--wa-color-yellow);
--wa-color-danger-on: var(--wa-color-yellow-on);
}
.wa-danger-green {
--wa-color-danger-95: var(--wa-color-green-95);
--wa-color-danger-90: var(--wa-color-green-90);
--wa-color-danger-80: var(--wa-color-green-80);
--wa-color-danger-70: var(--wa-color-green-70);
--wa-color-danger-60: var(--wa-color-green-60);
--wa-color-danger-50: var(--wa-color-green-50);
--wa-color-danger-40: var(--wa-color-green-40);
--wa-color-danger-30: var(--wa-color-green-30);
--wa-color-danger-20: var(--wa-color-green-20);
--wa-color-danger-10: var(--wa-color-green-10);
--wa-color-danger-05: var(--wa-color-green-05);
--wa-color-danger: var(--wa-color-green);
--wa-color-danger-on: var(--wa-color-green-on);
}
.wa-danger-cyan {
--wa-color-danger-95: var(--wa-color-cyan-95);
--wa-color-danger-90: var(--wa-color-cyan-90);
--wa-color-danger-80: var(--wa-color-cyan-80);
--wa-color-danger-70: var(--wa-color-cyan-70);
--wa-color-danger-60: var(--wa-color-cyan-60);
--wa-color-danger-50: var(--wa-color-cyan-50);
--wa-color-danger-40: var(--wa-color-cyan-40);
--wa-color-danger-30: var(--wa-color-cyan-30);
--wa-color-danger-20: var(--wa-color-cyan-20);
--wa-color-danger-10: var(--wa-color-cyan-10);
--wa-color-danger-05: var(--wa-color-cyan-05);
--wa-color-danger: var(--wa-color-cyan);
--wa-color-danger-on: var(--wa-color-cyan-on);
}
.wa-danger-blue {
--wa-color-danger-95: var(--wa-color-blue-95);
--wa-color-danger-90: var(--wa-color-blue-90);
--wa-color-danger-80: var(--wa-color-blue-80);
--wa-color-danger-70: var(--wa-color-blue-70);
--wa-color-danger-60: var(--wa-color-blue-60);
--wa-color-danger-50: var(--wa-color-blue-50);
--wa-color-danger-40: var(--wa-color-blue-40);
--wa-color-danger-30: var(--wa-color-blue-30);
--wa-color-danger-20: var(--wa-color-blue-20);
--wa-color-danger-10: var(--wa-color-blue-10);
--wa-color-danger-05: var(--wa-color-blue-05);
--wa-color-danger: var(--wa-color-blue);
--wa-color-danger-on: var(--wa-color-blue-on);
}
.wa-danger-indigo {
--wa-color-danger-95: var(--wa-color-indigo-95);
--wa-color-danger-90: var(--wa-color-indigo-90);
--wa-color-danger-80: var(--wa-color-indigo-80);
--wa-color-danger-70: var(--wa-color-indigo-70);
--wa-color-danger-60: var(--wa-color-indigo-60);
--wa-color-danger-50: var(--wa-color-indigo-50);
--wa-color-danger-40: var(--wa-color-indigo-40);
--wa-color-danger-30: var(--wa-color-indigo-30);
--wa-color-danger-20: var(--wa-color-indigo-20);
--wa-color-danger-10: var(--wa-color-indigo-10);
--wa-color-danger-05: var(--wa-color-indigo-05);
--wa-color-danger: var(--wa-color-indigo);
--wa-color-danger-on: var(--wa-color-indigo-on);
}
.wa-danger-purple {
--wa-color-danger-95: var(--wa-color-purple-95);
--wa-color-danger-90: var(--wa-color-purple-90);
--wa-color-danger-80: var(--wa-color-purple-80);
--wa-color-danger-70: var(--wa-color-purple-70);
--wa-color-danger-60: var(--wa-color-purple-60);
--wa-color-danger-50: var(--wa-color-purple-50);
--wa-color-danger-40: var(--wa-color-purple-40);
--wa-color-danger-30: var(--wa-color-purple-30);
--wa-color-danger-20: var(--wa-color-purple-20);
--wa-color-danger-10: var(--wa-color-purple-10);
--wa-color-danger-05: var(--wa-color-purple-05);
--wa-color-danger: var(--wa-color-purple);
--wa-color-danger-on: var(--wa-color-purple-on);
}
.wa-danger-pink {
--wa-color-danger-95: var(--wa-color-pink-95);
--wa-color-danger-90: var(--wa-color-pink-90);
--wa-color-danger-80: var(--wa-color-pink-80);
--wa-color-danger-70: var(--wa-color-pink-70);
--wa-color-danger-60: var(--wa-color-pink-60);
--wa-color-danger-50: var(--wa-color-pink-50);
--wa-color-danger-40: var(--wa-color-pink-40);
--wa-color-danger-30: var(--wa-color-pink-30);
--wa-color-danger-20: var(--wa-color-pink-20);
--wa-color-danger-10: var(--wa-color-pink-10);
--wa-color-danger-05: var(--wa-color-pink-05);
--wa-color-danger: var(--wa-color-pink);
--wa-color-danger-on: var(--wa-color-pink-on);
}
.wa-danger-gray {
--wa-color-danger-95: var(--wa-color-gray-95);
--wa-color-danger-90: var(--wa-color-gray-90);
--wa-color-danger-80: var(--wa-color-gray-80);
--wa-color-danger-70: var(--wa-color-gray-70);
--wa-color-danger-60: var(--wa-color-gray-60);
--wa-color-danger-50: var(--wa-color-gray-50);
--wa-color-danger-40: var(--wa-color-gray-40);
--wa-color-danger-30: var(--wa-color-gray-30);
--wa-color-danger-20: var(--wa-color-gray-20);
--wa-color-danger-10: var(--wa-color-gray-10);
--wa-color-danger-05: var(--wa-color-gray-05);
--wa-color-danger: var(--wa-color-gray);
--wa-color-danger-on: var(--wa-color-gray-on);
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/variants.css */
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/palettes/base.css */
:where(:root),
:host {
--wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
--wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
--wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
--wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
--wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
--wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
--wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
--wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
--wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
--wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
--wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
--wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
--wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
--wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
--wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
--wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
--wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
--wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
--wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
--wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/color/palettes/default.css */
@layer wa-color-palette {
:where(:root),
.wa-palette-default {
--wa-color-red-95: #fff0ef ;
--wa-color-red-90: #ffdedc ;
--wa-color-red-80: #ffb8b6 ;
--wa-color-red-70: #fd8f90 ;
--wa-color-red-60: #f3676c ;
--wa-color-red-50: #dc3146 ;
--wa-color-red-40: #b30532 ;
--wa-color-red-30: #8a132c ;
--wa-color-red-20: #631323 ;
--wa-color-red-10: #3e0913 ;
--wa-color-red-05: #2a040b ;
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: #fff0e6 ;
--wa-color-orange-90: #ffdfca ;
--wa-color-orange-80: #ffbb94 ;
--wa-color-orange-70: #ff9266 ;
--wa-color-orange-60: #f46a45 ;
--wa-color-orange-50: #cd491c ;
--wa-color-orange-40: #9f3501 ;
--wa-color-orange-30: #802700 ;
--wa-color-orange-20: #601b00 ;
--wa-color-orange-10: #3c0d00 ;
--wa-color-orange-05: #280600 ;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fef3cd ;
--wa-color-yellow-90: #ffe495 ;
--wa-color-yellow-80: #fac22b ;
--wa-color-yellow-70: #ef9d00 ;
--wa-color-yellow-60: #da7e00 ;
--wa-color-yellow-50: #b45f04 ;
--wa-color-yellow-40: #8c4602 ;
--wa-color-yellow-30: #6f3601 ;
--wa-color-yellow-20: #532600 ;
--wa-color-yellow-10: #331600 ;
--wa-color-yellow-05: #220c00 ;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-yellow-key: 80;
--wa-color-green-95: #e3f9e3 ;
--wa-color-green-90: #c2f2c1 ;
--wa-color-green-80: #93da98 ;
--wa-color-green-70: #5dc36f ;
--wa-color-green-60: #00ac49 ;
--wa-color-green-50: #00883c ;
--wa-color-green-40: #036730 ;
--wa-color-green-30: #0a5027 ;
--wa-color-green-20: #0a3a1d ;
--wa-color-green-10: #052310 ;
--wa-color-green-05: #031608 ;
--wa-color-green: var(--wa-color-green-60);
--wa-color-green-key: 60;
--wa-color-cyan-95: #e3f6fb ;
--wa-color-cyan-90: #c5ecf7 ;
--wa-color-cyan-80: #7fd6ec ;
--wa-color-cyan-70: #2fbedc ;
--wa-color-cyan-60: #00a3c0 ;
--wa-color-cyan-50: #078098 ;
--wa-color-cyan-40: #026274 ;
--wa-color-cyan-30: #014c5b ;
--wa-color-cyan-20: #003844 ;
--wa-color-cyan-10: #002129 ;
--wa-color-cyan-05: #00151b ;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #e8f3ff ;
--wa-color-blue-90: #d1e8ff ;
--wa-color-blue-80: #9fceff ;
--wa-color-blue-70: #6eb3ff ;
--wa-color-blue-60: #3e96ff ;
--wa-color-blue-50: #0071ec ;
--wa-color-blue-40: #0053c0 ;
--wa-color-blue-30: #003f9c ;
--wa-color-blue-20: #002d77 ;
--wa-color-blue-10: #001a4e ;
--wa-color-blue-05: #000f35 ;
--wa-color-blue: var(--wa-color-blue-50);
--wa-color-blue-key: 50;
--wa-color-indigo-95: #f0f2ff ;
--wa-color-indigo-90: #dfe5ff ;
--wa-color-indigo-80: #bcc7ff ;
--wa-color-indigo-70: #9da9ff ;
--wa-color-indigo-60: #808aff ;
--wa-color-indigo-50: #6163f2 ;
--wa-color-indigo-40: #4945cb ;
--wa-color-indigo-30: #3933a7 ;
--wa-color-indigo-20: #292381 ;
--wa-color-indigo-10: #181255 ;
--wa-color-indigo-05: #0d0a3a ;
--wa-color-indigo: var(--wa-color-indigo-50);
--wa-color-indigo-key: 50;
--wa-color-purple-95: #f7f0ff ;
--wa-color-purple-90: #eedfff ;
--wa-color-purple-80: #ddbdff ;
--wa-color-purple-70: #ca99ff ;
--wa-color-purple-60: #b678f5 ;
--wa-color-purple-50: #9951db ;
--wa-color-purple-40: #7936b3 ;
--wa-color-purple-30: #612692 ;
--wa-color-purple-20: #491870 ;
--wa-color-purple-10: #2d0b48 ;
--wa-color-purple-05: #1e0532 ;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-pink-95: #feeff9 ;
--wa-color-pink-90: #feddf0 ;
--wa-color-pink-80: #fcb5d8 ;
--wa-color-pink-70: #f78dbf ;
--wa-color-pink-60: #e66ba3 ;
--wa-color-pink-50: #c84382 ;
--wa-color-pink-40: #9e2a6c ;
--wa-color-pink-30: #7d1e58 ;
--wa-color-pink-20: #5e1342 ;
--wa-color-pink-10: #3c0828 ;
--wa-color-pink-05: #28041a ;
--wa-color-pink: var(--wa-color-pink-50);
--wa-color-pink-key: 50;
--wa-color-gray-95: #f1f2f3 ;
--wa-color-gray-90: #e4e5e9 ;
--wa-color-gray-80: #c7c9d0 ;
--wa-color-gray-70: #abaeb9 ;
--wa-color-gray-60: #9194a2 ;
--wa-color-gray-50: #717584 ;
--wa-color-gray-40: #545868 ;
--wa-color-gray-30: #424554 ;
--wa-color-gray-20: #2f323f ;
--wa-color-gray-10: #1b1d26 ;
--wa-color-gray-05: #101219 ;
--wa-color-gray: var(--wa-color-gray-40);
--wa-color-gray-key: 40;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/themes/default.css */
@layer wa-theme {
:where(:root),
.wa-theme-default,
.wa-light,
.wa-dark .wa-invert,
.wa-light .wa-theme-default,
.wa-dark .wa-theme-default.wa-invert,
.wa-dark .wa-theme-default .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix( in oklab, var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent );
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert,
.wa-dark .wa-theme-default,
.wa-light .wa-theme-default.wa-invert,
.wa-light .wa-theme-default .wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix( in oklab, var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent );
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
--wa-color-mix-active: var(--wa-color-surface-default) 20%;
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
}
:where(:root),
.wa-theme-default,
.wa-light,
.wa-dark,
.wa-invert {
font-family: var(--wa-font-family-body);
--wa-font-family-body:
ui-sans-serif,
system-ui,
sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-size-scale: 1;
--wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px);
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px);
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px);
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px);
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale));
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px);
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px);
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px);
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px);
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px);
--wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px);
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem);
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem);
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem);
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem);
--wa-space-m: calc(var(--wa-space-scale) * 1rem);
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem);
--wa-space-xl: calc(var(--wa-space-scale) * 2rem);
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem);
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem);
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem);
--wa-space-5xl: calc(var(--wa-space-scale) * 5rem);
--wa-content-spacing: var(--wa-space-l);
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem;
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem;
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-shadow-spread-l) var(--wa-color-shadow);
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: "*";
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round( calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), 1px );
--wa-form-control-toggle-size: round(1.25em, 1px);
--wa-button-transform-hover: none;
--wa-button-transform-active: scale(0.9875);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-color: var(--wa-tooltip-background-color);
--wa-tooltip-border-style: var(--wa-border-style);
--wa-tooltip-border-width: var(--wa-border-width-s);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
}
:is(html, body):has(wa-page) {
min-height: 100%;
padding: 0;
margin: 0;
}
}
/* node_modules/.pnpm/@awesome.me+webawesome@3.9.0_@floating-ui+utils@0.2.11_@types+react@19.2.17/node_modules/@awesome.me/webawesome/dist/styles/webawesome.css */
/* -------------------------------------------------------------------------
* Houza ↔ Web Awesome token bridge.
*
* Web Awesome (@awesome.me/webawesome) components read `--wa-*` theming
* custom properties. This sheet remaps WA's SEMANTIC layer onto Houza
* `--hz-*` tokens so blessed commodity components adopt the Houza
* look instead of WA defaults. Same adapter pattern cashflow uses for
* Tailwind's @theme.
*
* Load AFTER both `tokens.css` (defines --hz-*) and WA's own theme
* (`@awesome.me/webawesome/dist/styles/themes/default.css`, defines the
* --wa-* defaults) — equal :root specificity, so source order wins and the
* Houza values override.
*
* WA's color model: each role (brand/success/warning/danger/neutral) exposes
* fill (background) / border / on (text on the fill) at loud/normal/quiet
* intensities. Houza role mapping:
* brand → accent (ion) success → healthy (mint)
* warning → working (amber) danger → warn (ember)
* neutral → surfaces/greys
* Derived intensities use color-mix() off the base token (no new literals).
*
* Themed to the console (dark) surface. The display surface refines these
* under [data-hz-surface="display"] below.
* ------------------------------------------------------------------------- */
:root {
/* ---- Surfaces --------------------------------------------------------- */
--wa-color-surface-default: var(--hz-canvas);
--wa-color-surface-raised: var(--hz-raised);
--wa-color-surface-lowered: var(--hz-page-dark);
--wa-color-surface-border: var(--hz-hairline-strong);
/* ---- Text ------------------------------------------------------------- */
--wa-color-text-normal: var(--hz-text-primary);
--wa-color-text-quiet: var(--hz-text-tertiary);
--wa-color-text-link: var(--hz-accent-bright);
/* ---- Brand (accent — Ion Overdrive) --------------------------------------
* Pre-ion this role borrowed working (amber) because console had no
* non-status accent — brand and warning buttons were literally identical.
* Now mapped to the semantic accent tier, which ends ember/amber double
* duty: brand = the interface talking, warning/danger = system state.
* References the SEMANTIC --hz-accent* tokens (not ion primitives), so
* :root[data-accent='flux'|'plasma'] swaps re-theme brand buttons with no
* extra scopes here (unlike Display's candidates below, whose brand role
* points at the --hz-brand semantic that doesn't swap).
* on-loud/on-normal use --hz-on-accent — mode-aware by design: dark ink on
* the bright dark-mode accent, white on the deeper light-mode accent (same
* pairing Display ships for on-brand).
*/
--wa-color-brand-fill-loud: var(--hz-accent);
--wa-color-brand-fill-normal: var(--hz-accent);
--wa-color-brand-fill-quiet: var(--hz-accent-wash);
--wa-color-brand-border-loud: var(--hz-accent);
--wa-color-brand-border-normal: var(--hz-accent);
--wa-color-brand-border-quiet: var(--hz-accent-deep);
--wa-color-brand-on-loud: var(--hz-on-accent);
--wa-color-brand-on-normal: var(--hz-on-accent);
--wa-color-brand-on-quiet: var(--hz-accent-bright);
/* ---- Success (mint) --------------------------------------------------- */
--wa-color-success-fill-loud: var(--hz-mint-bright);
--wa-color-success-fill-normal: var(--hz-healthy);
--wa-color-success-fill-quiet: color-mix(in oklab, var(--hz-healthy) 16%, transparent);
--wa-color-success-border-loud: var(--hz-healthy);
--wa-color-success-border-normal: var(--hz-healthy);
--wa-color-success-border-quiet: color-mix(in oklab, var(--hz-healthy) 35%, transparent);
--wa-color-success-on-loud: var(--hz-ink-950);
--wa-color-success-on-normal: var(--hz-ink-950);
--wa-color-success-on-quiet: var(--hz-healthy-text);
/* ---- Warning (amber) -------------------------------------------------- */
--wa-color-warning-fill-loud: var(--hz-amber-deep);
--wa-color-warning-fill-normal: var(--hz-working);
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--hz-working) 16%, transparent);
--wa-color-warning-border-loud: var(--hz-amber-deep);
--wa-color-warning-border-normal: var(--hz-amber-deep);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--hz-working) 35%, transparent);
--wa-color-warning-on-loud: var(--hz-ink-950);
--wa-color-warning-on-normal: var(--hz-ink-950);
--wa-color-warning-on-quiet: var(--hz-working-text);
/* ---- Danger (ember) -----------------------------------------------------
* on-loud/on-normal were --hz-text-primary — same mode-flipping bug as
* brand/success/warning above, but it happened to pass WCAG AA by
* coincidence (4.78:1 in light mode, vs the 4.5:1 minimum) since ink.950
* is also text-primary's light-mode value. Not a deliberate choice
* though — pinned to --hz-ink-950 directly like its siblings so it's
* correct by design, not by accident of which primitive text-primary
* happened to resolve to.
*/
--wa-color-danger-fill-loud: var(--hz-warn-deep);
--wa-color-danger-fill-normal: var(--hz-warn);
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--hz-warn) 16%, transparent);
--wa-color-danger-border-loud: var(--hz-warn-deep);
--wa-color-danger-border-normal: var(--hz-warn-deep);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--hz-warn) 35%, transparent);
/* White on ember, not ink — every design-mock ember fill (count badges,
the LIVE pill) pairs #fff with it; ink-on-ember read as a muddy red. */
--wa-color-danger-on-loud: var(--hz-neutral-0);
--wa-color-danger-on-normal: var(--hz-neutral-0);
--wa-color-danger-on-quiet: var(--hz-warn-bright);
/* ---- Neutral (tonal — mid-tone lift off the surface pole) ---------------
* Neutral fills used to sit at the paper extremes (--hz-panel, a few % off
* canvas) — near-invisible on canvas and fully invisible on darker card
* backgrounds, patched with a facade border for a while. Now tonal
* (Material 3 "filled tonal" pattern): the fill is the canvas lifted 14%
* toward text-primary — self-contrasting on ANY background, and the mix
* auto-flips with mode because both endpoints do. The 8% accent tint keeps
* it from reading dead grey and matches Display's brand-tinted neutrals
* (pre-ion this was working-amber — the only warm-ish non-status hue
* console had); at 8% it never reads as an interactive accent, and it
* tracks [data-accent] candidate swaps like every other accent reference.
*/
--wa-color-neutral-fill-loud: color-mix(in oklab, var(--hz-accent) 8%, color-mix(in oklab, var(--hz-text-primary) 14%, var(--hz-canvas)));
--wa-color-neutral-fill-normal: color-mix(in oklab, var(--hz-accent) 8%, color-mix(in oklab, var(--hz-text-primary) 14%, var(--hz-canvas)));
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--hz-text-primary) 8%, var(--hz-canvas));
/* Border was --hz-hairline-strong/--hz-hairline — static warm-white veils
* that vanish against light backgrounds, so outlined neutral buttons had a
* near-invisible border in light mode. --hz-text-quiet flips with mode;
* 60% reads as an edge, not an outline. (Display's block below already
* uses its own mode-aware --hz-border-* tokens — this fix is console's.) */
--wa-color-neutral-border-loud: color-mix(in oklab, var(--hz-text-quiet) 60%, transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--hz-text-quiet) 60%, transparent);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--hz-text-quiet) 35%, transparent);
--wa-color-neutral-on-loud: var(--hz-text-primary);
--wa-color-neutral-on-normal: var(--hz-text-primary);
--wa-color-neutral-on-quiet: var(--hz-text-secondary);
/* ---- Focus ------------------------------------------------------------ */
--wa-color-focus: var(--hz-accent);
/* ---- Type ------------------------------------------------------------- */
--wa-font-family-body: var(--hz-font-display);
--wa-font-family-heading: var(--hz-font-display);
--wa-font-family-code: var(--hz-font-mono);
/* ---- Shape ------------------------------------------------------------ */
--wa-border-radius-s: var(--hz-radius-sm);
--wa-border-radius-m: var(--hz-radius-md);
--wa-border-radius-l: var(--hz-radius-lg);
}
/* -------------------------------------------------------------------------
* DISPLAY SURFACE refinement.
*
* Only the values that DIFFER from console are re-pointed here; everything
* else inherits the :root bridge. Because these --hz-* tokens are already
* re-themed per surface/mode by the token build, we mostly re-point WA's
* BRAND role at the Display brand (violet) + soften the shape/type to the
* friendlier web-facing feel. Success/warning/danger stay on the shared
* status hues (mint / amber / ember), so they read identically across
* surfaces.
* ------------------------------------------------------------------------- */
[data-hz-surface='display'] {
/* ---- Surfaces (now resolve to the warm-neutral ramp) ------------------ */
--wa-color-surface-default: var(--hz-canvas);
--wa-color-surface-raised: var(--hz-raised);
--wa-color-surface-lowered: var(--hz-sunken);
--wa-color-surface-border: var(--hz-border-strong);
/* ---- Text ------------------------------------------------------------- */
--wa-color-text-normal: var(--hz-text-primary);
--wa-color-text-quiet: var(--hz-text-tertiary);
--wa-color-text-link: var(--hz-brand-text);
/* ---- Brand (violet — the Display standard accent) --------------------- */
--wa-color-brand-fill-loud: var(--hz-brand);
--wa-color-brand-fill-normal: var(--hz-brand);
--wa-color-brand-fill-quiet: var(--hz-brand-wash);
--wa-color-brand-border-loud: var(--hz-brand);
--wa-color-brand-border-normal: var(--hz-brand);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--hz-brand) 35%, transparent);
--wa-color-brand-on-loud: var(--hz-on-brand);
--wa-color-brand-on-normal: var(--hz-on-brand);
--wa-color-brand-on-quiet: var(--hz-brand-text);
/* ---- Neutral (tonal — same pattern as console's block above) ------------
* Canvas lifted toward text-primary (auto-flips with mode), tinted with
* the Display brand (violet — no status semantics here, so it can carry
* the same 8% comfortably). Self-contrasting on any background; no border.
*/
--wa-color-neutral-fill-loud: color-mix(in oklab, var(--hz-brand) 8%, color-mix(in oklab, var(--hz-text-primary) 14%, var(--hz-canvas)));
--wa-color-neutral-fill-normal: color-mix(in oklab, var(--hz-brand) 8%, color-mix(in oklab, var(--hz-text-primary) 14%, var(--hz-canvas)));
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--hz-text-primary) 8%, var(--hz-canvas));
--wa-color-neutral-border-loud: var(--hz-border-strong);
--wa-color-neutral-border-normal: var(--hz-border-strong);
--wa-color-neutral-border-quiet: var(--hz-border);
--wa-color-neutral-on-loud: var(--hz-text-primary);
--wa-color-neutral-on-normal: var(--hz-text-primary);
--wa-color-neutral-on-quiet: var(--hz-text-secondary);
/* ---- Focus ------------------------------------------------------------ */
--wa-color-focus: var(--hz-brand);
/* ---- Type (Geist for web-facing) -------------------------------------- */
--wa-font-family-body: var(--hz-font-display);
--wa-font-family-heading: var(--hz-font-display);
--wa-font-family-code: var(--hz-font-mono);
/* ---- Shape (friendlier radius than the instrument console) ------------ */
--wa-border-radius-s: 6px;
--wa-border-radius-m: 9px;
--wa-border-radius-l: 12px;
}
/* Optional accent CANDIDATES — opt-in, never the default. Re-point brand only;
the fixed perceptual weight of each triad keeps contrast intact. */
[data-hz-surface='display'][data-accent='indigo'] {
--wa-color-brand-fill-loud: var(--hz-indigo-base);
--wa-color-brand-fill-normal: var(--hz-indigo-base);
--wa-color-brand-on-loud: var(--hz-indigo-on);
--wa-color-brand-on-normal: var(--hz-indigo-on);
--wa-color-focus: var(--hz-indigo-base);
}
[data-hz-surface='display'][data-accent='teal'] {
--wa-color-brand-fill-loud: var(--hz-teal-base);
--wa-color-brand-fill-normal: var(--hz-teal-base);
--wa-color-brand-on-loud: var(--hz-teal-on);
--wa-color-brand-on-normal: var(--hz-teal-on);
--wa-color-focus: var(--hz-teal-base);
}
[data-hz-surface='display'][data-accent='slate'] {
--wa-color-brand-fill-loud: var(--hz-slate-base);
--wa-color-brand-fill-normal: var(--hz-slate-base);
--wa-color-brand-on-loud: var(--hz-slate-on);
--wa-color-brand-on-normal: var(--hz-slate-on);
--wa-color-focus: var(--hz-slate-base);
}
/* ============================================================================
Houza — static token tail (concatenated onto Terrazzo output by the build).
Holds tokens that are CSS expressions rather than clean DTCG values:
rgb triplets, veil composites, gradients, shadows, em-tracking, glow aliases,
plus keyframes and helper classes. @font-face lives in tokens/fonts.css
(dist/fonts.css) — split out so tokens.css never forces a font fetch.
============================================================================ */
:root {
/* ---- Color scheme -------------------------------------------------------
`light dark` lets native UI (scrollbars, form controls, canvas) follow
the OS preference automatically — no media query needed for this
property specifically, the browser resolves it. Token *values* follow
the same ambient default via the `@media (prefers-color-scheme: light)`
block build-tokens-post.js generates from Terrazzo's light-mode output;
dark stays the unconditional fallback for older browsers with no
support. `data-hz-mode='light'|'dark'` is the explicit per-consumer
override — Blinger's console dashboard pins 'dark' since it wants an
appliance-style fixed scheme regardless of OS (WA's own theming doc:
explicit toggle, OS-follow layered on top). Light token values are a
provisional stub pending the full palette (Claude Design). */
color-scheme: light dark;
/* ---- Warm-white veil base (rgb triplet for rgba() overlays) ------------- */
--hz-veil-rgb: 255, 240, 220;
/* ---- Glow bases (rgb triplets for box-shadow halos) -------------------- */
--hz-glow-ember-rgb: 229, 79, 40;
--hz-glow-mint-rgb: 95, 192, 138;
--hz-glow-amber-rgb: 232, 177, 74;
/* ---- Backdrop ---------------------------------------------------------- */
--hz-backdrop: radial-gradient(140% 120% at 50% 0%, var(--hz-ink-grad-hi) 0%, var(--hz-ink-grad-lo) 70%);
/* ---- Warm-white veils (semantic, composite) ---------------------------- */
--hz-hairline-soft: rgba(var(--hz-veil-rgb), 0.07); /* grid gaps */
--hz-hairline: rgba(var(--hz-veil-rgb), 0.08); /* header border */
--hz-hairline-strong: rgba(var(--hz-veil-rgb), 0.11); /* host-name divider */
--hz-divider: rgba(var(--hz-veil-rgb), 0.12); /* masthead / footer */
--hz-fill-subtle: rgba(var(--hz-veil-rgb), 0.025); /* hierarchy row tint */
--hz-fill-faint: rgba(var(--hz-veil-rgb), 0.03); /* swatch cells */
--hz-fill-chip: rgba(var(--hz-veil-rgb), 0.05); /* neutral chip */
--hz-track: rgba(var(--hz-veil-rgb), 0.09); /* meter track */
/* ---- Glow (semantic aliases) ------------------------------------------- */
--hz-glow-warn: var(--hz-glow-ember-rgb);
--hz-glow-healthy: var(--hz-glow-mint-rgb);
--hz-glow-working: var(--hz-glow-amber-rgb);
/* ---- Accent glow --------------------------------------------------------
color-mix (like hz-status-pill's dot) rather than a new rgb triplet, so it
tracks [data-accent] candidate swaps for free. */
--hz-accent-glow: color-mix(in oklch, var(--hz-accent) 45%, transparent);
/* Tight companion to --hz-accent-glow (45%) — near-edge bloom (hz-app-header plate). */
--hz-accent-glow-tight: color-mix(in oklch, var(--hz-accent) 65%, transparent);
/* ---- App header (hz-app-header) ----------------------------------------
Accent-tinted ink wash for app mastheads. Derived from the accent so it
tracks [data-accent] swaps for free — never bake an accent literal here. */
--hz-header-wash: linear-gradient(
180deg,
color-mix(in oklch, var(--hz-accent) 14%, var(--hz-ink-grad-hi)) 0%,
color-mix(in oklch, var(--hz-accent) 8%, var(--hz-ink-grad-lo)) 100%
);
/* Chromatic keyline spanning the three console accent candidates.
Intentionally NOT re-mapped under [data-accent] — a fixed, persistent
signature across all accents. Stops are their own tokens so --hz-keyline
(horizontal) and --hz-keyline-vertical share one source of truth instead
of duplicating the color literals per orientation. */
--hz-keyline-stop-1: oklch(0.72 0.2 295);
--hz-keyline-stop-2: oklch(0.7 0.21 350);
--hz-keyline-stop-3: oklch(0.79 0.12 200);
--hz-keyline: linear-gradient(
90deg,
var(--hz-keyline-stop-1),
var(--hz-keyline-stop-2) 50%,
var(--hz-keyline-stop-3)
);
--hz-keyline-vertical: linear-gradient(
180deg,
var(--hz-keyline-stop-1),
var(--hz-keyline-stop-2) 50%,
var(--hz-keyline-stop-3)
);
/* Muted text on solid accent (host meta on the nameplate). Per-candidate
value — this one is authored, not derived; overridden per [data-accent]
scope below. Ion default: */
--hz-on-accent-soft: oklch(0.9 0.05 295);
/* Full-strength text on --hz-accent-deep (nameplate wordmark). Achromatic
(chroma 0), so unlike -soft above it needs NO per-candidate override —
same reasoning as --hz-keyline: a hue-independent value is correct
across every accent by construction, not a corner cut. --hz-on-accent
itself is deliberately NOT reused here: it's dark ink calibrated for
--hz-accent (ion-base, bright ~71% lightness), the wrong pairing for
--hz-accent-deep (~56%, needs light text). */
--hz-on-accent-strong: var(--hz-neutral-0);
/* ---- Tabs (hz-tabs / hz-tab) --------------------------------------------
Per-surface tab voice, from the Blinger design sheet. Console: dense
instrument labels (mono, bold, uppercase, tracked). Display re-voices
below. Consumed by hz-tab/hz-tabs with these as escape hatches. */
--hz-tab-font: var(--hz-w-bold) var(--hz-fs-xs)/1 var(--hz-font-mono);
--hz-tab-tracking: var(--hz-track-host);
--hz-tab-transform: uppercase;
--hz-tab-color: var(--hz-text-label);
--hz-tab-color-active: var(--hz-accent-bright);
--hz-tab-padding: 0.4rem 0.0625rem 0.6rem;
--hz-tab-gap: 1.375rem;
--hz-tabs-track: var(--hz-hairline);
--hz-tab-rail-wash: var(--hz-accent-wash);
--hz-tab-rail-accent: var(--hz-accent);
/* ---- Elevation --------------------------------------------------------- */
--hz-shadow-frame: 0 24px 70px rgba(0, 0, 0, 0.5);
--hz-shadow-frame-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
/* ---- Motion ------------------------------------------------------------ */
--hz-pulse-ease: ease-in-out;
}
/* Explicit mode toggles: flip native UI to match the token values emitted
under the same selectors (Terrazzo for light, the base :root pass for
dark). Force one or the other regardless of OS preference. */
:root[data-hz-mode='light'] {
color-scheme: light;
}
:root[data-hz-mode='dark'] {
color-scheme: dark;
}
/* Display surface re-voices the tab labels: sans (Geist via the surface's
--hz-font-display remap), sentence case, quieter inactive color, brand ink
when active — per the Blinger design sheet's display-surface tab specimens. */
[data-hz-surface='display'] {
--hz-tab-font: var(--hz-w-regular) var(--hz-fs-sm)/1 var(--hz-font-display);
--hz-tab-weight-active: var(--hz-w-semibold);
--hz-tab-tracking: 0em;
--hz-tab-transform: none;
--hz-tab-color: var(--hz-text-tertiary);
--hz-tab-color-active: var(--hz-brand-text);
--hz-tabs-track: var(--hz-border);
--hz-tab-rail-wash: var(--hz-brand-wash);
--hz-tab-rail-accent: var(--hz-brand);
}
/* ============================================================================
Console accent candidates — opt-in via [data-accent], same selector model as
Display's swappable brand set. Ion (violet 295) is the promoted default and
comes from the token pipeline; these scopes override the semantic accent
vars only. --hz-accent-glow(-tight) follow automatically via color-mix;
--hz-on-accent-soft is authored per candidate (not derivable).
============================================================================ */
:root[data-accent='flux'] {
--hz-accent: oklch(0.70 0.21 350);
--hz-accent-bright: oklch(0.78 0.18 350);
--hz-accent-deep: oklch(0.55 0.19 350);
--hz-accent-wash: oklch(0.27 0.07 350);
--hz-on-accent: oklch(0.18 0.04 350);
--hz-on-accent-soft: oklch(0.9 0.05 350);
}
:root[data-accent='plasma'] {
--hz-accent: oklch(0.79 0.12 200);
--hz-accent-bright: oklch(0.86 0.11 200);
--hz-accent-deep: oklch(0.60 0.11 200);
--hz-accent-wash: oklch(0.28 0.04 200);
--hz-on-accent: oklch(0.17 0.03 210);
--hz-on-accent-soft: oklch(0.92 0.04 200);
}
/* ============================================================================
Keyframes — warn motion only
============================================================================ */
@keyframes hz-lightPulse {
0%, 100% { box-shadow: 0 0 8px 2px rgba(var(--hz-glow-warn), 0.55); }
50% { box-shadow: 0 0 17px 5px rgba(var(--hz-glow-warn), 0.95); }
}
@keyframes hz-railPulse {
0%, 100% { box-shadow: 0 0 10px 0 rgba(var(--hz-glow-warn), 0.32); }
50% { box-shadow: 0 0 22px 4px rgba(var(--hz-glow-warn), 0.72); }
}
/* ============================================================================
Helper classes — convenience only
============================================================================ */
.hz-pulse-dot { animation: hz-lightPulse var(--hz-pulse-duration) var(--hz-pulse-ease) infinite; }
.hz-pulse-rail { animation: hz-railPulse var(--hz-pulse-duration) var(--hz-pulse-ease) infinite; }
.hz-mono { font-family: var(--hz-font-mono); }
.hz-display { font-family: var(--hz-font-display); }
.hz-lcd { font-family: var(--hz-font-lcd); }
@media (prefers-reduced-motion: reduce) {
[data-pulse], .hz-pulse-dot, .hz-pulse-rail { animation: none !important; }
}
/* Typography utility classes — see Foundations/Typography. */
.hz-type-body {
font: var(--hz-type-body);
letter-spacing: var(--hz-type-body-letter-spacing);
}
.hz-type-body-strong {
font: var(--hz-type-body-strong);
letter-spacing: var(--hz-type-body-strong-letter-spacing);
}
.hz-type-caption {
font: var(--hz-type-caption);
letter-spacing: var(--hz-type-caption-letter-spacing);
}
.hz-type-data {
font: var(--hz-type-data);
letter-spacing: var(--hz-type-data-letter-spacing);
}
.hz-type-eyebrow {
font: var(--hz-type-eyebrow);
letter-spacing: var(--hz-type-eyebrow-letter-spacing);
text-transform: var(--hz-type-eyebrow-text-transform);
}
.hz-type-heading-1 {
font: var(--hz-type-heading-1);
letter-spacing: var(--hz-type-heading-1-letter-spacing);
}
.hz-type-heading-2 {
font: var(--hz-type-heading-2);
letter-spacing: var(--hz-type-heading-2-letter-spacing);
}
.hz-type-heading-3 {
font: var(--hz-type-heading-3);
letter-spacing: var(--hz-type-heading-3-letter-spacing);
}
.hz-type-host-label {
font: var(--hz-type-host-label);
letter-spacing: var(--hz-type-host-label-letter-spacing);
text-transform: var(--hz-type-host-label-text-transform);
}
.hz-type-section-header {
font: var(--hz-type-section-header);
letter-spacing: var(--hz-type-section-header-letter-spacing);
text-transform: var(--hz-type-section-header-text-transform);
}