/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --pegbo-chart-blue-500: #4e79a7; /* Chart blue — full intensity (500-step) */
  --pegbo-chart-blue-300: #8db1d9; /* Chart blue — mid-weight (300-step) */
  --pegbo-chart-blue-100: #d1e5fa; /* Chart blue — lightest fill (100-step) */
  --pegbo-chart-orange-500: #f28e2a; /* Chart orange — full intensity (500-step) */
  --pegbo-chart-orange-300: #ffbc86; /* Chart orange — mid-weight (300-step) */
  --pegbo-chart-orange-100: #ffe6d2; /* Chart orange — lightest fill (100-step) */
  --pegbo-chart-red-500: #e15759; /* Chart red — full intensity (500-step) */
  --pegbo-chart-red-300: #ff9a96; /* Chart red — mid-weight (300-step) */
  --pegbo-chart-red-100: #ffddda; /* Chart red — lightest fill (100-step) */
  --pegbo-chart-teal-500: #76b7b2; /* Chart teal — full intensity (500-step) */
  --pegbo-chart-teal-300: #a2d7d3; /* Chart teal — mid-weight (300-step) */
  --pegbo-chart-teal-100: #d7f1ef; /* Chart teal — lightest fill (100-step) */
  --pegbo-chart-green-500: #59a14f; /* Chart green — full intensity (500-step) */
  --pegbo-chart-green-300: #92cd89; /* Chart green — mid-weight (300-step) */
  --pegbo-chart-green-100: #d2f1cd; /* Chart green — lightest fill (100-step) */
  --pegbo-chart-amber-500: #edc948; /* Chart amber — full intensity (500-step). Use only dark text (#141820) on this fill — white labels fail WCAG AA (contrast 1.61:1 vs white) */
  --pegbo-chart-amber-300: #fadd7c; /* Chart amber — mid-weight (300-step) */
  --pegbo-chart-amber-100: #fef0c1; /* Chart amber — lightest fill (100-step) */
  --pegbo-chart-purple-500: #b07aa1; /* Chart purple — full intensity (500-step) */
  --pegbo-chart-purple-300: #daabcc; /* Chart purple — mid-weight (300-step) */
  --pegbo-chart-purple-100: #f7deef; /* Chart purple — lightest fill (100-step) */
  --pegbo-chart-indigo-500: #6b6ecf; /* Chart indigo — full intensity (500-step) */
  --pegbo-chart-indigo-300: #9b9edf; /* Chart indigo — mid-weight (300-step) */
  --pegbo-chart-indigo-100: #d5d6f4; /* Chart indigo — lightest fill (100-step) */
  --pegbo-chart-1-default: #4e79a7; /* Series 1 — blue, full opacity */
  --pegbo-chart-1-subtle: #8db1d9; /* Series 1 — blue, mid weight */
  --pegbo-chart-1-subtlest: #d1e5fa; /* Series 1 — blue, lightest fill */
  --pegbo-chart-2-default: #f28e2a; /* Series 2 — orange, full opacity */
  --pegbo-chart-2-subtle: #ffbc86; /* Series 2 — orange, mid weight */
  --pegbo-chart-2-subtlest: #ffe6d2; /* Series 2 — orange, lightest fill */
  --pegbo-chart-3-default: #e15759; /* Series 3 — red, full opacity */
  --pegbo-chart-3-subtle: #ff9a96; /* Series 3 — red, mid weight */
  --pegbo-chart-3-subtlest: #ffddda; /* Series 3 — red, lightest fill */
  --pegbo-chart-4-default: #76b7b2; /* Series 4 — teal, full opacity */
  --pegbo-chart-4-subtle: #a2d7d3; /* Series 4 — teal, mid weight */
  --pegbo-chart-4-subtlest: #d7f1ef; /* Series 4 — teal, lightest fill */
  --pegbo-chart-5-default: #59a14f; /* Series 5 — green, full opacity */
  --pegbo-chart-5-subtle: #92cd89; /* Series 5 — green, mid weight */
  --pegbo-chart-5-subtlest: #d2f1cd; /* Series 5 — green, lightest fill */
  --pegbo-chart-6-default: #edc948; /* Series 6 — amber, full opacity. Use only dark text (#141820) on this fill — white labels fail WCAG AA */
  --pegbo-chart-6-subtle: #fadd7c; /* Series 6 — amber, mid weight */
  --pegbo-chart-6-subtlest: #fef0c1; /* Series 6 — amber, lightest fill */
  --pegbo-chart-7-default: #b07aa1; /* Series 7 — purple, full opacity */
  --pegbo-chart-7-subtle: #daabcc; /* Series 7 — purple, mid weight */
  --pegbo-chart-7-subtlest: #f7deef; /* Series 7 — purple, lightest fill */
  --pegbo-chart-8-default: #6b6ecf; /* Series 8 — indigo, full opacity */
  --pegbo-chart-8-subtle: #9b9edf; /* Series 8 — indigo, mid weight */
  --pegbo-chart-8-subtlest: #d5d6f4; /* Series 8 — indigo, lightest fill */
  --pegbo-chip-max-width-xs: 80px; /* Max chip width for xs size */
  --pegbo-chip-max-width-sm: 100px; /* Max chip width for sm size */
  --pegbo-chip-max-width-md: 120px; /* Max chip width for md size */
  --pegbo-chip-max-width-lg: 160px; /* Max chip width for lg size */
  --pegbo-white: #ffffff; /* Pure white */
  --pegbo-black: #000000; /* Pure black */
  --pegbo-brand-50: #edfaf6;
  --pegbo-brand-100: #d3f0e7;
  --pegbo-brand-200: #b5ebda;
  --pegbo-brand-300: #83e0c2;
  --pegbo-brand-400: #55d6ae;
  --pegbo-brand-500: #30c797;
  --pegbo-brand-600: #11ad7c;
  --pegbo-brand-700: #099468;
  --pegbo-brand-800: #088059;
  --pegbo-brand-900: #0e533d;
  --pegbo-neutral-50: #f7f9fc;
  --pegbo-neutral-100: #f0f2f7;
  --pegbo-neutral-200: #e4e6ed;
  --pegbo-neutral-300: #c5c8d1;
  --pegbo-neutral-400: #a9adb8;
  --pegbo-neutral-500: #6d7384;
  --pegbo-neutral-600: #51586b;
  --pegbo-neutral-700: #2d3342;
  --pegbo-neutral-800: #141820;
  --pegbo-neutral-900: #0d1119;
  --pegbo-oslo-50: #f5f8fa;
  --pegbo-oslo-100: #e4f0f6;
  --pegbo-oslo-200: #b4d6e9;
  --pegbo-oslo-300: #8fc2e0;
  --pegbo-oslo-400: #66add6;
  --pegbo-oslo-500: #1582c1;
  --pegbo-oslo-600: #04639a;
  --pegbo-oslo-700: #04507c;
  --pegbo-oslo-800: #043958;
  --pegbo-oslo-900: #03263a;
  --pegbo-dragon-50: #fdeced;
  --pegbo-dragon-100: #fcd9dc;
  --pegbo-dragon-200: #fbc6c9;
  --pegbo-dragon-300: #f5949a;
  --pegbo-dragon-400: #ef5d66;
  --pegbo-dragon-500: #eb3743;
  --pegbo-dragon-600: #e31624;
  --pegbo-dragon-700: #af1d26;
  --pegbo-dragon-800: #7e2026;
  --pegbo-dragon-900: #541c20;
  --pegbo-osaka-50: #fef2ec;
  --pegbo-osaka-100: #fce5d9;
  --pegbo-osaka-200: #fbd5c1;
  --pegbo-osaka-300: #f7b591;
  --pegbo-osaka-400: #f3925e;
  --pegbo-osaka-500: #eb7637;
  --pegbo-osaka-600: #d75b19;
  --pegbo-osaka-700: #a74c1b;
  --pegbo-osaka-800: #743716;
  --pegbo-osaka-900: #3d1c0a;
  --pegbo-norway-50: #f5f8f9;
  --pegbo-norway-100: #e3f0f7;
  --pegbo-norway-200: #c9e3f3;
  --pegbo-norway-300: #94cbeb;
  --pegbo-norway-400: #55b5ec;
  --pegbo-norway-500: #19a1f0;
  --pegbo-norway-600: #0782ca;
  --pegbo-norway-700: #006199;
  --pegbo-norway-800: #03466d;
  --pegbo-norway-900: #042f49;
  --pegbo-paris-50: #fbfbfe;
  --pegbo-paris-100: #f1f1fe;
  --pegbo-paris-200: #e2e2fd;
  --pegbo-paris-300: #a9a7fb;
  --pegbo-paris-400: #7371f9;
  --pegbo-paris-500: #5755f7;
  --pegbo-paris-600: #3a37f6;
  --pegbo-paris-700: #1916ca;
  --pegbo-paris-800: #1c1a89;
  --pegbo-paris-900: #191859;
  --pegbo-tokio-50: #fcf8fc;
  --pegbo-tokio-100: #faeffa;
  --pegbo-tokio-200: #f5e0f5;
  --pegbo-tokio-300: #e9b3ea;
  --pegbo-tokio-400: #e28be4;
  --pegbo-tokio-500: #d947dc;
  --pegbo-tokio-600: #bc1dbf;
  --pegbo-tokio-700: #8f1291;
  --pegbo-tokio-800: #610d63;
  --pegbo-tokio-900: #3d0a3e;
  --pegbo-dubai-50: #fffaf5;
  --pegbo-dubai-100: #fff3e5;
  --pegbo-dubai-200: #fee7cd;
  --pegbo-dubai-300: #fdcb90;
  --pegbo-dubai-400: #fcb35f;
  --pegbo-dubai-500: #fc9827;
  --pegbo-dubai-600: #f08000;
  --pegbo-dubai-700: #b66202;
  --pegbo-dubai-800: #7c4403;
  --pegbo-dubai-900: #452603;
  --pegbo-fg-default: #0d1119; /* Primary text and icon — headings, body, most icons */
  --pegbo-fg-subtle: #51586b; /* Secondary text and icon — labels, metadata, captions */
  --pegbo-fg-subtlest: #6d7384; /* Tertiary text and icon — placeholders, hints, timestamps */
  --pegbo-fg-disabled: #a9adb8; /* Disabled text and icon */
  --pegbo-fg-inverse: #ffffff; /* Text / icon on brand/status bold surfaces. Contrast with brand-700 (#099468) is ~3.85:1 — intentional Pegbo design decision (Lexend Deca Medium). Approved by Oleg Mikolajcik via design-tokens PR #40, 2026-06-15. Exception covers surface-brand-bold/surface-status-success-bold only (not exhaustive — applies to any surface using surface-brand-bold or surface-status-success-bold). Hover (surface-brand-bold-hovered, brand-800 #088059) = 4.95:1 AA ✅. Pressed (surface-brand-bold-pressed, brand-900 #0E533D) = 9.03:1 AAA ✅. */
  --pegbo-fg-inverse-subtle: #e4e6ed; /* Secondary text on dark inverse surfaces */
  --pegbo-fg-brand: #099468; /* Brand-colored text and icon — inline accents, active nav. 3.85:1 on white — intentional brand exception [Approved by Oleg Mikolajcik via PR #40, 2026-06-15]; icon-only at small sizes or text ≥18pt. See PRINCIPLES.md. */
  --pegbo-fg-brand-bold: #099468; /* Stronger brand text — large text (≥18pt) or bold (≥14pt). 3.85:1 on white; AA-compliant for large text (3:1 threshold) [Approved by Oleg Mikolajcik via PR #40, 2026-06-15]. See PRINCIPLES.md. */
  --pegbo-fg-link: #04639a; /* Hyperlink — default */
  --pegbo-fg-link-hovered: #04507c; /* Hyperlink — hover */
  --pegbo-fg-link-visited: #043958; /* Hyperlink — visited */
  --pegbo-fg-link-pressed: #03263a; /* Hyperlink — pressed/active */
  --pegbo-fg-status-danger: #e31624; /* Error / danger text and icon */
  --pegbo-fg-status-danger-bold: #af1d26; /* Stronger danger — emphasized error messages */
  --pegbo-fg-status-success: #099468; /* Success text and icon. 3.85:1 on white, 3.60:1 on surface-status-success — intentional brand exception [Approved by Oleg Mikolajcik via PR #40, 2026-06-15]. Usage: icon-only at small sizes; or icon+label at ≥18pt / bold ≥14pt. Normal-size (14–16px) labeled text NOT permitted on white or success bg. See PRINCIPLES.md. */
  --pegbo-fg-status-warning: #a74c1b; /* Warning text and icon */
  --pegbo-fg-status-warning-inverse: #0d1119; /* Text on bold warning (yellow) bg — needs dark for WCAG AA */
  --pegbo-fg-status-success-inverse: #0d1119; /* Text on bold success (brand-700) bg — needs dark for WCAG AA (white gives 3.33:1, fails SC 1.4.3) */
  --pegbo-fg-status-info: #04639a; /* Informational text and icon */
  --pegbo-fg-accent-red: #eb3743; /* Red categorical accent — tags, charts, data labels */
  --pegbo-fg-accent-red-bold: #af1d26; /* Stronger red categorical accent — danger status text, emphasized labels */
  --pegbo-fg-accent-orange: #eb7637; /* Orange categorical accent */
  --pegbo-fg-accent-amber: #f08000; /* Amber categorical accent */
  --pegbo-fg-accent-green: #099468; /* Green categorical accent. 3.85:1 on white — intentional brand exception [Approved by Oleg Mikolajcik via PR #40, 2026-06-15]; icon-only or data labels at ≥18pt. See PRINCIPLES.md. */
  --pegbo-fg-accent-teal: #1582c1; /* Teal categorical accent */
  --pegbo-fg-accent-blue: #19a1f0; /* Blue categorical accent */
  --pegbo-fg-accent-indigo: #5755f7; /* Indigo categorical accent */
  --pegbo-fg-accent-purple: #bc1dbf; /* Purple categorical accent */
  --pegbo-fg-accent-grey: #51586b; /* Grey categorical accent — neutral status text */
  --pegbo-surface-page: #f7f9fc; /* App root / page background */
  --pegbo-surface-default: #ffffff; /* Primary card, panel, modal surface */
  --pegbo-surface-raised: #f7f9fc; /* Elevated surface — nav sidebar, popover, dropdown */
  --pegbo-surface-sunken: #f0f2f7; /* Recessed / inset surface — code block, aside, sidebar inner */
  --pegbo-surface-overlay: #0d1119; /* Modal scrim. Pair with opacity-50 / opacity-60 in CSS */
  --pegbo-surface-inverse: #141820; /* Dark inverse surface — tooltips, dark panels, toasts */
  --pegbo-surface-neutral-subtlest: #f7f9fc; /* Row hover bg — ultra-light, minimal contrast */
  --pegbo-surface-neutral-subtlest-hovered: #f0f2f7; /* Row hover bg — pressed state */
  --pegbo-surface-neutral-subtle: #f0f2f7; /* Very light hover area — table rows, list items, icon ghost button bg */
  --pegbo-surface-neutral-subtle-hovered: #e4e6ed; /* Hovered neutral subtle */
  --pegbo-surface-neutral-subtle-pressed: #c5c8d1; /* Pressed neutral subtle */
  --pegbo-surface-neutral-bold: #e4e6ed; /* Secondary / default button bg */
  --pegbo-surface-neutral-bold-hovered: #c5c8d1; /* Secondary button — hover */
  --pegbo-surface-neutral-bold-pressed: #a9adb8; /* Secondary button — pressed */
  --pegbo-surface-neutral-boldest: #c5c8d1; /* Scrollbar thumb — rest. Darkest neutral chrome fill (one step beyond neutral-bold). ≈1.6:1 on white — SC 1.4.11 waiver (owner @alehmikalaichyk-arch): scrollbar is a non-critical, supplementary affordance (keyboard/wheel/touch scroll independently). */
  --pegbo-surface-neutral-boldest-hovered: #a9adb8; /* Scrollbar thumb — hover. ≈2.2:1 on white — SC 1.4.11 waiver (see neutral-boldest). */
  --pegbo-surface-neutral-boldest-pressed: #6d7384; /* Scrollbar thumb — pressed/dragging. ≈4.8:1 on white. */
  --pegbo-surface-brand-subtlest: #d3f0e7; /* Very light hover area — table rows, icon ghost button bg */
  --pegbo-surface-brand-subtle: #b5ebda; /* Light hover area — menu items in active states, statuses, badges */
  --pegbo-surface-brand-subtle-hovered: #b5ebda; /* Brand subtle — hover */
  --pegbo-surface-brand-bold: #099468; /* Primary brand button bg */
  --pegbo-surface-brand-bold-hovered: #088059; /* Primary brand button — hover */
  --pegbo-surface-brand-bold-pressed: #0e533d; /* Primary brand button — pressed */
  --pegbo-surface-selected: #d3f0e7; /* Selected item tint — tab, menu item, row */
  --pegbo-surface-selected-hovered: #b5ebda; /* Selected item — hover */
  --pegbo-surface-selected-bold: #099468; /* Selected item — filled indicator (pill, toggle) */
  --pegbo-surface-input: #ffffff; /* Text field / textarea / select bg */
  --pegbo-surface-input-hovered: #f7f9fc; /* Input bg on hover */
  --pegbo-surface-input-focused: #ffffff; /* Input bg when focused — same as default, the outline changes */
  --pegbo-surface-input-disabled: #f0f2f7; /* Input bg when disabled */
  --pegbo-surface-status-danger: #fdeced; /* Error / danger tint — alert bg, error input bg */
  --pegbo-surface-status-danger-bold: #e31624; /* Danger filled — danger button, error badge */
  --pegbo-surface-status-danger-bold-hovered: #af1d26; /* Danger button — hover */
  --pegbo-surface-status-danger-bold-pressed: #7e2026; /* Danger button — pressed */
  --pegbo-surface-status-success: #d3f0e7; /* Success tint — success alert bg, badge bg */
  --pegbo-surface-status-success-bold: #099468; /* Success filled — success button, checkmark badge */
  --pegbo-surface-status-warning: #fff3e5; /* Warning tint — warning alert bg */
  --pegbo-surface-status-warning-bold: #eb7637; /* Warning filled — warning badge, toast */
  --pegbo-surface-status-info: #e4f0f6; /* Info tint — info alert bg */
  --pegbo-surface-status-info-bold: #04639a; /* Info filled — info badge, info button */
  --pegbo-surface-accent-red: #fcd9dc; /* Red accent bg — tag, data cell, chart legend */
  --pegbo-surface-accent-orange: #fce5d9; /* Orange accent bg */
  --pegbo-surface-accent-amber: #fff3e5; /* Amber accent bg */
  --pegbo-surface-accent-green: #d3f0e7; /* Green accent bg */
  --pegbo-surface-accent-teal: #e4f0f6; /* Teal accent bg */
  --pegbo-surface-accent-blue: #e3f0f7; /* Blue accent bg */
  --pegbo-surface-accent-indigo: #f1f1fe; /* Indigo accent bg */
  --pegbo-surface-accent-purple: #faeffa; /* Purple accent bg */
  --pegbo-surface-accent-grey: #f0f2f7; /* Grey accent bg — neutral status background */
  --pegbo-surface-accent-red-subtlest: #fcd9dc; /* Red accent — subtlest tint bg */
  --pegbo-surface-accent-red-subtlest-hovered: #fbc6c9; /* Red accent — subtlest hover */
  --pegbo-surface-accent-red-subtlest-pressed: #f5949a; /* Red accent — subtlest pressed */
  --pegbo-surface-accent-red-bold: #eb3743; /* Red accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-red-bold-hovered: #e31624; /* Red accent — bold hover */
  --pegbo-surface-accent-red-bold-pressed: #af1d26; /* Red accent — bold pressed */
  --pegbo-surface-accent-red-boldest: #af1d26; /* Red accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-red-boldest-hovered: #7e2026; /* Red accent — boldest hover */
  --pegbo-surface-accent-red-boldest-pressed: #541c20; /* Red accent — boldest pressed */
  --pegbo-surface-accent-orange-subtlest: #fce5d9; /* Orange accent — subtlest tint bg */
  --pegbo-surface-accent-orange-subtlest-hovered: #fbd5c1; /* Orange accent — subtlest hover */
  --pegbo-surface-accent-orange-subtlest-pressed: #f7b591; /* Orange accent — subtlest pressed */
  --pegbo-surface-accent-orange-bold: #eb7637; /* Orange accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-orange-bold-hovered: #d75b19; /* Orange accent — bold hover */
  --pegbo-surface-accent-orange-bold-pressed: #a74c1b; /* Orange accent — bold pressed */
  --pegbo-surface-accent-orange-boldest: #a74c1b; /* Orange accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-orange-boldest-hovered: #743716; /* Orange accent — boldest hover */
  --pegbo-surface-accent-orange-boldest-pressed: #3d1c0a; /* Orange accent — boldest pressed */
  --pegbo-surface-accent-amber-subtlest: #fff3e5; /* Amber accent — subtlest tint bg */
  --pegbo-surface-accent-amber-subtlest-hovered: #fee7cd; /* Amber accent — subtlest hover */
  --pegbo-surface-accent-amber-subtlest-pressed: #fdcb90; /* Amber accent — subtlest pressed */
  --pegbo-surface-accent-amber-bold: #fc9827; /* Amber accent — bold fill; decorative / non-text (white text fails AA — use dark fg) */
  --pegbo-surface-accent-amber-bold-hovered: #f08000; /* Amber accent — bold hover */
  --pegbo-surface-accent-amber-bold-pressed: #b66202; /* Amber accent — bold pressed */
  --pegbo-surface-accent-amber-boldest: #b66202; /* Amber accent — boldest fill; white text 4.43:1 (large-text/icon only; prefer dark fg) */
  --pegbo-surface-accent-amber-boldest-hovered: #7c4403; /* Amber accent — boldest hover */
  --pegbo-surface-accent-amber-boldest-pressed: #452603; /* Amber accent — boldest pressed */
  --pegbo-surface-accent-green-subtlest: #d3f0e7; /* Green accent — subtlest tint bg */
  --pegbo-surface-accent-green-subtlest-hovered: #b5ebda; /* Green accent — subtlest hover */
  --pegbo-surface-accent-green-subtlest-pressed: #83e0c2; /* Green accent — subtlest pressed */
  --pegbo-surface-accent-green-bold: #30c797; /* Green accent — bold fill; decorative / non-text (white text fails AA — use dark fg) */
  --pegbo-surface-accent-green-bold-hovered: #11ad7c; /* Green accent — bold hover */
  --pegbo-surface-accent-green-bold-pressed: #099468; /* Green accent — bold pressed */
  --pegbo-surface-accent-green-boldest: #099468; /* Green accent — boldest fill (brand-700). White text = 3.85:1 (brand large-text exception, see PRINCIPLES.md) */
  --pegbo-surface-accent-green-boldest-hovered: #088059; /* Green accent — boldest hover (brand-800, white text 4.95:1 AA) */
  --pegbo-surface-accent-green-boldest-pressed: #0e533d; /* Green accent — boldest pressed (brand-900, white text AAA) */
  --pegbo-surface-accent-teal-subtlest: #e4f0f6; /* Teal accent — subtlest tint bg */
  --pegbo-surface-accent-teal-subtlest-hovered: #b4d6e9; /* Teal accent — subtlest hover */
  --pegbo-surface-accent-teal-subtlest-pressed: #8fc2e0; /* Teal accent — subtlest pressed */
  --pegbo-surface-accent-teal-bold: #1582c1; /* Teal accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-teal-bold-hovered: #04639a; /* Teal accent — bold hover */
  --pegbo-surface-accent-teal-bold-pressed: #04507c; /* Teal accent — bold pressed */
  --pegbo-surface-accent-teal-boldest: #04507c; /* Teal accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-teal-boldest-hovered: #043958; /* Teal accent — boldest hover */
  --pegbo-surface-accent-teal-boldest-pressed: #03263a; /* Teal accent — boldest pressed */
  --pegbo-surface-accent-blue-subtlest: #e3f0f7; /* Blue accent — subtlest tint bg */
  --pegbo-surface-accent-blue-subtlest-hovered: #c9e3f3; /* Blue accent — subtlest hover */
  --pegbo-surface-accent-blue-subtlest-pressed: #94cbeb; /* Blue accent — subtlest pressed */
  --pegbo-surface-accent-blue-bold: #19a1f0; /* Blue accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-blue-bold-hovered: #0782ca; /* Blue accent — bold hover */
  --pegbo-surface-accent-blue-bold-pressed: #006199; /* Blue accent — bold pressed */
  --pegbo-surface-accent-blue-boldest: #006199; /* Blue accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-blue-boldest-hovered: #03466d; /* Blue accent — boldest hover */
  --pegbo-surface-accent-blue-boldest-pressed: #042f49; /* Blue accent — boldest pressed */
  --pegbo-surface-accent-indigo-subtlest: #f1f1fe; /* Indigo accent — subtlest tint bg */
  --pegbo-surface-accent-indigo-subtlest-hovered: #e2e2fd; /* Indigo accent — subtlest hover */
  --pegbo-surface-accent-indigo-subtlest-pressed: #a9a7fb; /* Indigo accent — subtlest pressed */
  --pegbo-surface-accent-indigo-bold: #5755f7; /* Indigo accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-indigo-bold-hovered: #3a37f6; /* Indigo accent — bold hover */
  --pegbo-surface-accent-indigo-bold-pressed: #1916ca; /* Indigo accent — bold pressed */
  --pegbo-surface-accent-indigo-boldest: #1916ca; /* Indigo accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-indigo-boldest-hovered: #1c1a89; /* Indigo accent — boldest hover */
  --pegbo-surface-accent-indigo-boldest-pressed: #191859; /* Indigo accent — boldest pressed */
  --pegbo-surface-accent-purple-subtlest: #faeffa; /* Purple accent — subtlest tint bg */
  --pegbo-surface-accent-purple-subtlest-hovered: #f5e0f5; /* Purple accent — subtlest hover */
  --pegbo-surface-accent-purple-subtlest-pressed: #e9b3ea; /* Purple accent — subtlest pressed */
  --pegbo-surface-accent-purple-bold: #d947dc; /* Purple accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-purple-bold-hovered: #bc1dbf; /* Purple accent — bold hover */
  --pegbo-surface-accent-purple-bold-pressed: #8f1291; /* Purple accent — bold pressed */
  --pegbo-surface-accent-purple-boldest: #8f1291; /* Purple accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-purple-boldest-hovered: #610d63; /* Purple accent — boldest hover */
  --pegbo-surface-accent-purple-boldest-pressed: #3d0a3e; /* Purple accent — boldest pressed */
  --pegbo-surface-accent-grey-subtlest: #f0f2f7; /* Grey accent — subtlest tint bg */
  --pegbo-surface-accent-grey-subtlest-hovered: #e4e6ed; /* Grey accent — subtlest hover */
  --pegbo-surface-accent-grey-subtlest-pressed: #c5c8d1; /* Grey accent — subtlest pressed */
  --pegbo-surface-accent-grey-bold: #6d7384; /* Grey accent — bold fill; decorative / non-text (small text not guaranteed AA) */
  --pegbo-surface-accent-grey-bold-hovered: #51586b; /* Grey accent — bold hover */
  --pegbo-surface-accent-grey-bold-pressed: #2d3342; /* Grey accent — bold pressed */
  --pegbo-surface-accent-grey-boldest: #2d3342; /* Grey accent — boldest fill; white fg-inverse text OK */
  --pegbo-surface-accent-grey-boldest-hovered: #141820; /* Grey accent — boldest hover */
  --pegbo-surface-accent-grey-boldest-pressed: #0d1119; /* Grey accent — boldest pressed */
  --pegbo-outline-subtle: #f0f2f7; /* Subtlest separator — between sections, under nav */
  --pegbo-outline-default: #e4e6ed; /* Default card, panel, table border */
  --pegbo-outline-strong: #c5c8d1; /* Emphasized border — selected card, active section */
  --pegbo-outline-disabled: #f0f2f7; /* Disabled element border */
  --pegbo-outline-inverse: #51586b; /* Border on inverse / dark bg */
  --pegbo-outline-brand: #099468; /* Brand-colored border — active tab underline, progress bar */
  --pegbo-outline-focus: #099468; /* Focus ring for keyboard navigation (all interactive elements) */
  --pegbo-outline-input: #c5c8d1; /* Input border — at rest (slightly stronger than card) */
  --pegbo-outline-input-hovered: #1582c1; /* Input border — hover (teal accent signals interactivity) */
  --pegbo-outline-input-focused: #04639a; /* Input border — focused (thicker or dual border with outline/focus) */
  --pegbo-outline-input-error: #e31624; /* Input border — validation error */
  --pegbo-outline-input-disabled: #f0f2f7; /* Input border — disabled */
  --pegbo-outline-input-success: #11ad7c; /* Input border — validation success. [PENDING: remap to brand-700 — tracked in design-tokens issue #41] */
  --pegbo-outline-status-danger: #e31624; /* Error / danger border — alert, error card */
  --pegbo-outline-status-success: #088059; /* Success border — brand-800 (#127D5B) gives 4.98:1 vs brand-100 surface, passes WCAG 1.4.11 3:1 non-text (resolves #41) */
  --pegbo-outline-status-warning: #d75b19; /* Warning border */
  --pegbo-outline-status-info: #04639a; /* Info border */
  --pegbo-outline-accent-grey: #c5c8d1; /* Grey accent border — neutral status (general use) */
  --pegbo-outline-accent-grey-strong: #6d7384; /* Grey accent border — higher contrast variant for WCAG 1.4.11 (4.23:1 vs neutral-100 surface) */
  --pegbo-outline-accent-red: #e31624; /* Red accent border */
  --pegbo-outline-accent-orange: #d75b19; /* Orange accent border */
  --pegbo-outline-accent-amber: #b66202; /* Amber accent border */
  --pegbo-outline-accent-green: #11ad7c; /* Green accent border */
  --pegbo-outline-accent-teal: #04639a; /* Teal accent border */
  --pegbo-outline-accent-blue: #0782ca; /* Blue accent border */
  --pegbo-outline-accent-indigo: #3a37f6; /* Indigo accent border */
  --pegbo-outline-accent-purple: #8f1291; /* Purple accent border */
  --pegbo-shared-height-xs: 30px; /* Shared component height xs — used by Input, Button, Select, Multiselect at xs size */
  --pegbo-shared-height-sm: 34px; /* Shared component height sm — used by Input, Button, Select, Multiselect at sm size */
  --pegbo-shared-height-md: 40px; /* Shared component height md — used by Input, Button, Select, Multiselect at md size (default) */
  --pegbo-shared-height-lg: 48px; /* Shared component height lg — used by Input, Button, Select, Multiselect at lg size */
  --pegbo-motion-duration-instant: 0ms; /* No transition — immediate state change */
  --pegbo-motion-duration-fast: 100ms; /* Fast micro-interactions (hover, focus) */
  --pegbo-motion-duration-medium: 200ms; /* Medium-speed UI animations — tab indicator slide, shared element transitions */
  --pegbo-motion-duration-normal: 150ms; /* Standard UI transition — color, opacity, border (between fast 100ms and medium 200ms) */
  --pegbo-motion-duration-slow: 400ms; /* Slow transitions (page-level, modal) */
  --pegbo-motion-duration-row-highlight: 1400ms; /* Row pulse highlight duration (Command Center rowPulse animation) */
  --pegbo-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); /* Ease-in — accelerating from zero */
  --pegbo-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Ease-out — decelerating to zero */
  --pegbo-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Standard ease-in-out */
  --pegbo-motion-easing-row-highlight: cubic-bezier(0, 0, 0.2, 1); /* Row pulse easing (Command Center rowPulse — ease-out) */
  --pegbo-radius-xs: 2px; /* Extra-small radius — Mantine 5/8 default xs */
  --pegbo-radius-sm: 4px; /* Small radius — Mantine 5/8 default sm */
  --pegbo-radius-md: 8px; /* Medium radius — Mantine 5/8 default md */
  --pegbo-radius-lg: 16px; /* Large radius — Mantine 5/8 default lg */
  --pegbo-radius-xl: 32px; /* Extra-large radius — Mantine 5/8 default xl */
  --pegbo-radius-card: 10px; /* Card border radius (Command Center --cc-card-radius) */
  --pegbo-radius-rounded-sm: 0.25rem; /* Tailwind rounded-sm override (spend-ui / command-center globals.css) */
  --pegbo-shadow-default: 0 2px 8px 0 rgba(45, 50, 66, 0.06); /* Default card / panel shadow (client-ui --shadow) */
  --pegbo-shadow-sm: 0 1px 4px 0 rgba(45, 50, 66, 0.04); /* Small shadow for subtle elevation */
  --pegbo-shadow-md: 0 4px 16px 0 rgba(45, 50, 66, 0.10); /* Medium shadow for dropdowns / popovers */
  --pegbo-shadow-lg: 0 8px 32px 0 rgba(45, 50, 66, 0.14); /* Large shadow for modals / dialogs */
  --pegbo-spacing-xs: 10px; /* Extra-small spacing — Mantine 5/8 default xs */
  --pegbo-spacing-sm: 12px; /* Small spacing — Mantine 5/8 default sm */
  --pegbo-spacing-md: 16px; /* Medium spacing — Mantine 5/8 default md */
  --pegbo-spacing-lg: 20px; /* Large spacing — Mantine 5/8 default lg */
  --pegbo-spacing-xl: 24px; /* Extra-large spacing — Mantine 5/8 default xl */
  --pegbo-font-body-xs-default: 300 0.75rem/1.125rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Input xs (text + placeholder); Drawer breadcrumb */
  --pegbo-font-body-xs-emphasis: 500 0.75rem/1.125rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Button xs; Label xs; Avatar xs initial; Tooltip; Sidebar collapsed label; StatusBar legend xs/sm */
  --pegbo-font-body-sm-default: 300 0.875rem/1.25rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* System default body. Input sm; Table cell default/static/supporting; Sidebar nav default; PageShell & Drawer subtitle; AccordionCard counter; StatusBar legend md/lg; GlobalHeader menu items; Table empty-state description; Accordion content */
  --pegbo-font-body-sm-emphasis: 500 0.875rem/1.25rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Button sm; Label sm; Avatar sm initial; DotIndicator; Sidebar section subtitle; GlobalHeader username; Table empty-state title */
  --pegbo-font-body-sm-high: 600 0.875rem/1.25rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Active/strongest UI text: Sidebar nav active; Accordion (list) trigger */
  --pegbo-font-body-md-default: 300 1rem/1.375rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Input md (text + placeholder) */
  --pegbo-font-body-md-emphasis: 500 1rem/1.375rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Button md; Label md & lg; Avatar md initial */
  --pegbo-font-body-lg-default: 300 1.125rem/1.5rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Input lg (text + placeholder) */
  --pegbo-font-body-lg-emphasis: 500 1.125rem/1.5rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Button lg; Avatar lg initial (canonical; heading.lg.default aliases this) */
  --pegbo-font-body-xl-emphasis: 500 1.25rem/1.625rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Avatar xl initial (no .default at 20px; canonical; heading.xl.default aliases this) */
  --pegbo-font-heading-lg-default: 500 1.125rem/1.5rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Drawer title; AccordionCard title (alias → font.body.lg.emphasis) */
  --pegbo-font-heading-xl-default: 500 1.25rem/1.625rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* alias → font.body.xl.emphasis */
  --pegbo-font-heading-xl-emphasis: 600 1.25rem/1.625rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* PageShell title */
  --pegbo-font-heading-2xl-default: 500 1.5rem/1.875rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Proposed — no current code usage */
  --pegbo-font-heading-2xl-emphasis: 600 1.5rem/1.875rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Proposed — no current code usage */
  --pegbo-font-display-md-default: 600 1.75rem/2.25rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Hero display heading — proposed */
  --pegbo-font-display-lg-default: 600 2rem/2.5rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Large display heading — proposed */
  --pegbo-font-overline-xs-default: 500 0.75rem/1.125rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Status chip sm; Sidebar section title */
  --pegbo-font-overline-xs-emphasis: 600 0.75rem/1.125rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Table column header (th) */
  --pegbo-font-overline-sm-default: 500 0.875rem/1.25rem 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Status chip md */
  --pegbo-letter-spacing-normal: 0em;
  --pegbo-letter-spacing-wide: 0.05em; /* Overline / uppercase labels */
  --pegbo-font-family-base: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Primary typeface — Lexend Deca with system fallbacks */
  --pegbo-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; /* Monospace — Command Center, code blocks */
  --pegbo-font-family-coverage-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Secondary sans-serif — Command Center UI fallback */
  --pegbo-font-weight-light: 300; /* Default body text — paragraphs, descriptions, table cells, secondary content */
  --pegbo-font-weight-medium: 500; /* Headings (xl and below), labels, inputs, buttons, emphasis, avatar initials */
  --pegbo-font-weight-semibold: 600; /* Primary headings only — restricted to font-size lg (18px) and above */
  --pegbo-font-size-xxs: 0.625rem; /* 10px — NOT RECOMMENDED. Reserved for cases explicitly defined in the design system only. Do not use for user-facing UI content. */
  --pegbo-font-size-xs: 0.75rem; /* 12px — minimum UI font size. Use for badges, status chips, tags, captions, overlines, timestamps. */
  --pegbo-font-size-sm: 0.875rem; /* 14px — secondary body, table cells, metadata */
  --pegbo-font-size-md: 1rem; /* 16px — default body text */
  --pegbo-font-size-lg: 1.125rem; /* 18px — large body / minimum size for semibold headings */
  --pegbo-font-size-xl: 1.25rem; /* 20px — sub-headings */
  --pegbo-font-size-2xl: 1.5rem; /* 24px — card headings */
  --pegbo-font-size-3xl: 1.75rem; /* 28px — section headings */
  --pegbo-font-size-4xl: 2rem; /* 32px — section display */
  --pegbo-font-size-5xl: 2.375rem; /* 38px — page hero headings */
  --pegbo-font-size-6xl: 4rem; /* 64px — hero display */
  --pegbo-line-height-xxs: 0.875rem; /* 14px — line height for xxs (10px) */
  --pegbo-line-height-xs: 1.125rem; /* 18px — line height for xs (12px). Fixed from 16px. */
  --pegbo-line-height-sm: 1.25rem; /* 20px — line height for sm (14px) */
  --pegbo-line-height-md: 1.375rem; /* 22px — line height for md (16px) */
  --pegbo-line-height-lg: 1.5rem; /* 24px — line height for lg (18px) */
  --pegbo-line-height-xl: 1.625rem; /* 26px — line height for xl (20px) */
  --pegbo-line-height-2xl: 1.875rem; /* 30px — line height for 2xl (24px) */
  --pegbo-line-height-3xl: 2.25rem; /* 36px — line height for 3xl (28px) */
  --pegbo-line-height-4xl: 2.5rem; /* 40px — line height for 4xl (32px) */
  --pegbo-line-height-5xl: 3rem; /* 48px — line height for 5xl (38px) */
  --pegbo-line-height-6xl: 5rem; /* 80px — line height for 6xl (64px) */
  --pegbo-z-index-overlay: 300; /* Modal backdrop overlay */
  --pegbo-z-index-modal: 500; /* Modal content container */
  --pegbo-z-index-popover: 600; /* Portal-rendered dropdowns (Select, Multiselect, DropdownMenu, DatePicker) — always above modal */
}