/* @pepperui/tokens 1.5.0 — generated by scripts/pepper-ui.mjs (2.4.2). Do not edit: npm run pepper-ui. */
/**
 * tokens.css — CSS custom properties
 * GENERATED by `npm run build` from tokens/*.json — do not edit by hand.
 * Pepper UI, the Mobupps design system. Source of truth: bitbucket.org/rashidmobupps/pepper-ui
 */

:root {
  --pui-icon-list-ink: #6a66e4;
  --pui-insight-max-width: 1344px;
  --pui-bullet-list-gap: 8px;
  --pui-chip-radius: 9999px;
  --pui-table-header-bg: #0c0b41;
  --pui-table-header-pill-tint: #d4d3f7;
  --pui-table-row-selected-bg: #e9e9fb;
  --pui-table-divider: #dad9d9;
  --pui-card-band: #dad9d9;
  --pui-avatar-blue-bg: #d4d3f7;
  --pui-avatar-blue-fg: #110e56;
  --pui-avatar-red-bg: #f9d3d2;
  --pui-avatar-red-fg: #5b0e0d;
  --pui-avatar-yellow-bg: #fdf3d3;
  --pui-avatar-yellow-fg: #634e0f;
  --pui-toggle-on-bg: #544d4d;
  --pui-toggle-on-fg: #ffffff;
  --pui-tabs-track: #f2f2f2;
  --pui-kpi-tone-blue-bg: #e9e9fb;
  --pui-kpi-tone-red-bg: #fce9e8;
  --pui-kpi-tone-yellow-bg: #fef9e9;
  --pui-kpi-tone-neutral-bg: #f2f2f2;
  --pui-kpi-delta-ring: #ffffff;
  --pui-nav-bg: #231b1b;
  --pui-nav-item-fg: #b5b3b3;
  --pui-nav-item-fg-active: #ffffff;
  --pui-nav-item-bg-hover: #ffffff14;
  --pui-nav-item-bg-active: #ffffff29;
  --pui-nav-section-fg: #858080;
  --pui-illustration-shell: #ffffff;
  --pui-illustration-surface: #f2f2f7;
  --pui-illustration-detail: #dad9d9;
  --pui-illustration-screen: #fbfbfd;
  --pui-illustration-deck: #ffffff;
  --pui-illustration-text: #0b0202;
  --pui-illustration-outline-color: #0b0202;
  --pui-illustration-outline-opacity: 0.85;
  --pui-illustration-outline-width: 0.5;
  --pui-illustration-connector-color: #b5b3b3;
  --pui-illustration-connector-radius: 0.028;
  --pui-illustration-arrow-color: #6c6666;
  --pui-illustration-arrow-width: 3;
  --pui-illustration-arrow-head-length: 5;
  --pui-illustration-arrow-head-angle: 40;
  --pui-illustration-chrome-bar: #2c2c2c;
  --pui-illustration-chrome-line: #1a1a1a;
  --pui-illustration-chrome-well: #3d3d3d;
  --pui-illustration-chrome-text: #888888;
  --pui-illustration-chrome-light-red: #ff5f57;
  --pui-illustration-chrome-light-amber: #febc2e;
  --pui-illustration-chrome-light-green: #28c840;
  --pui-color-neutral-0: #ffffff;
  --pui-color-neutral-100: #f2f2f2;
  --pui-color-neutral-200: #dad9d9;
  --pui-color-neutral-300: #b5b3b3;
  --pui-color-neutral-400: #858080;
  --pui-color-neutral-500: #6c6666;
  --pui-color-neutral-600: #544d4d;
  --pui-color-neutral-700: #3b3333;
  --pui-color-neutral-800: #231b1b;
  --pui-color-neutral-900: #0b0202;
  --pui-color-neutral-1000: #000000;
  --pui-color-blue-100: #e9e9fb;
  --pui-color-blue-200: #d4d3f7;
  --pui-color-blue-300: #6a66e4;
  --pui-color-blue-400: #2b25d9;
  --pui-color-blue-500: #221dad;
  --pui-color-blue-600: #110e56;
  --pui-color-blue-700: #0c0b41;
  --pui-color-red-100: #fce9e8;
  --pui-color-red-200: #f9d3d2;
  --pui-color-red-300: #ec6663;
  --pui-color-red-400: #e42521;
  --pui-color-red-500: #b61d1a;
  --pui-color-red-600: #5b0e0d;
  --pui-color-red-700: #440b09;
  --pui-color-yellow-100: #fef9e9;
  --pui-color-yellow-200: #fdf3d3;
  --pui-color-yellow-300: #fad567;
  --pui-color-yellow-400: #f9c426;
  --pui-color-yellow-500: #c79c1e;
  --pui-color-yellow-600: #634e0f;
  --pui-color-yellow-700: #4a3a0b;
  --pui-color-green-100: #d4f2de;
  --pui-color-green-400: #74af36;
  --pui-color-green-600: #1a6b36;
  --pui-color-status-danger: #da4144;
  --pui-color-light-blue-50: #fbfbfd;
  --pui-color-light-blue-100: #f2f2f7;
  --pui-color-gradient-stop-pink: #f24288;
  --pui-color-gradient-stop-orchid: #ebb8fc;
  --pui-color-gradient-stop-magenta: #d947d6;
  --pui-color-gradient-stop-indigo: #4a3df0;
  --pui-color-gradient-stop-violet: #6e3df0;
  --pui-color-gradient-stop-purple: #b03fe0;
  --pui-color-alpha-neutral-800-50: #231b1b80;
  --pui-color-alpha-white-8: #ffffff14;
  --pui-color-alpha-white-16: #ffffff29;
  --pui-color-alpha-black-7: #00000012;
  --pui-color-alpha-grey-232-49: #e8e8e87d;
  --pui-color-alpha-white-71: #ffffffb5;
  --pui-color-alpha-black-64: #000000a3;
  --pui-color-alpha-black-84: #000000d6;
  --pui-color-alpha-white-10: #ffffff1a;
  --pui-color-alpha-black-14: #00000024;
  --pui-color-chrome-bar: #2c2c2c;
  --pui-color-chrome-line: #1a1a1a;
  --pui-color-chrome-well: #3d3d3d;
  --pui-color-chrome-text: #888888;
  --pui-color-chrome-light-red: #ff5f57;
  --pui-color-chrome-light-amber: #febc2e;
  --pui-color-chrome-light-green: #28c840;
  --pui-gradient-blue: linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%);
  --pui-gradient-yellow: linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%);
  --pui-gradient-red: linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%);
  --pui-gradient-violet: linear-gradient(135deg, #4A3DF0 0%, #6E3DF0 50%, #B03FE0 100%);
  --pui-space-2: 2px;
  --pui-space-4: 4px;
  --pui-space-8: 8px;
  --pui-space-12: 12px;
  --pui-space-16: 16px;
  --pui-space-20: 20px;
  --pui-space-24: 24px;
  --pui-space-32: 32px;
  --pui-space-40: 40px;
  --pui-space-48: 48px;
  --pui-space-64: 64px;
  --pui-space-80: 80px;
  --pui-space-96: 96px;
  --pui-space-128: 128px;
  --pui-radius-4: 4px;
  --pui-radius-8: 8px;
  --pui-radius-16: 16px;
  --pui-radius-32: 32px;
  --pui-radius-64: 64px;
  --pui-radius-full: 9999px;
  --pui-font-family-poppins: Poppins, sans-serif;
  --pui-font-family-cyrillic: Onest, sans-serif;
  --pui-font-weight-400: 400;
  --pui-font-weight-500: 500;
  --pui-font-weight-600: 600;
  --pui-font-weight-700: 700;
  --pui-font-size-12: 12px;
  --pui-font-size-13: 13px;
  --pui-font-size-14: 14px;
  --pui-font-size-15: 15px;
  --pui-font-size-16: 16px;
  --pui-font-size-18: 18px;
  --pui-font-size-20: 20px;
  --pui-font-size-22: 22px;
  --pui-font-size-24: 24px;
  --pui-font-size-25: 25px;
  --pui-font-size-26: 26px;
  --pui-font-size-28: 28px;
  --pui-font-size-32: 32px;
  --pui-font-size-36: 36px;
  --pui-font-size-40: 40px;
  --pui-font-size-41: 41px;
  --pui-font-size-45: 45px;
  --pui-font-size-46: 46px;
  --pui-font-size-48: 48px;
  --pui-font-size-64: 64px;
  --pui-font-size-65: 65px;
  --pui-font-size-66: 66px;
  --pui-font-size-92: 92px;
  --pui-font-size-117: 117px;
  --pui-font-size-148: 148px;
  --pui-font-line-height-tight: 1.2;
  --pui-font-line-height-normal: 1.4;
  --pui-font-line-height-relaxed: 1.5;
  --pui-font-line-height-loose: 1.7;
  --pui-font-letter-spacing-normal: 0px;
  --pui-font-letter-spacing-tight: -0.01em;
  --pui-font-letter-spacing-wide: 0.06em;
  --pui-font-letter-spacing-wider: 0.1em;
  --pui-shadow-sm: 0px 1px 2px 0px #0000000d;
  --pui-shadow-lg: 0px 24px 48px -12px #0000002e;
  --pui-shadow-xl: 0px 24px 64px 0px #1510511f;
  --pui-shadow-xxl: 0px 32px 64px 0px #00000024;
  /* deprecated: no wearer since the Navigation menu took elevation.modal at Fedor's word (request 1, 2026-09-25, D161); elevation.bar now reads shadow.xxl. Removed in the next major. */
  --pui-shadow-xxl-soft: 0px 32px 64px -12px #00000024;
  --pui-duration-instant: 50ms;
  --pui-duration-fast: 150ms;
  --pui-duration-medium: 200ms;
  --pui-duration-slow: 250ms;
  --pui-duration-slower: 300ms;
  --pui-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pui-easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --pui-size-icon-16: 16px;
  --pui-size-icon-24: 24px;
  --pui-size-icon-32: 32px;
  --pui-size-icon-48: 48px;
  --pui-size-control-small: 28px;
  --pui-size-control-medium: 36px;
  --pui-size-control-large: 44px;
  --pui-breakpoint-tablet: 768px;
  --pui-breakpoint-desktop: 1024px;
  --pui-container-web: 1320px;
  --pui-container-slide: 1792px;
  --pui-canvas-slide-width: 1920px;
  --pui-canvas-slide-height: 1080px;
  --pui-canvas-slide-margin: 64px;
  --pui-canvas-slide-margin-top: 42px;
  --pui-blur-nav: 7.3px;
  --pui-blur-panel: 14.6px;
  --pui-blur-card: 6.8px;
  --pui-blur-blob: 150px;
  --pui-blur-control: 8px;
  --pui-text-default: #0b0202;
  --pui-text-muted: #544d4d;
  --pui-text-subtle: #858080;
  --pui-text-on-accent: #ffffff;
  --pui-text-on-inverse: #ffffff;
  --pui-text-link: #2b25d9;
  --pui-text-disabled: #b5b3b3;
  --pui-text-error: #e42521;
  --pui-text-caption: #544d4d;
  --pui-surface-page: #ffffff;
  --pui-surface-card: #f2f2f7;
  --pui-surface-sunken: #f2f2f2;
  --pui-surface-inverse: #231b1b;
  --pui-surface-slot: #ffffff;
  --pui-surface-glass: #e8e8e87d;
  --pui-surface-glass-strong: #ffffffb5;
  --pui-surface-glass-dark: #000000a3;
  --pui-surface-glass-dark-strong: #000000d6;
  --pui-ground-page-sunken: #f2f2f2;
  --pui-ground-page-track: #f2f2f2;
  --pui-ground-card-sunken: #dad9d9;
  --pui-ground-card-track: #ffffff;
  --pui-overlay-scrim: #231b1b80;
  --pui-border-default: #dad9d9;
  --pui-border-strong: #858080;
  --pui-border-focus: #6a66e4;
  --pui-border-error: #e42521;
  --pui-action-primary-bg: #0b0202;
  --pui-action-primary-bg-hover: #3b3333;
  --pui-action-primary-fg: #ffffff;
  --pui-action-secondary-bg: #ffffff;
  --pui-action-secondary-bg-hover: #f2f2f2;
  --pui-action-secondary-fg: #0b0202;
  --pui-action-secondary-border: #dad9d9;
  --pui-action-danger-bg: #e42521;
  --pui-action-danger-bg-hover: #b61d1a;
  --pui-action-danger-fg: #ffffff;
  --pui-action-disabled-bg: #f2f2f2;
  --pui-action-disabled-fg: #b5b3b3;
  --pui-status-success-bg: #d4f2de;
  --pui-status-success-fg: #1a6b36;
  --pui-status-success-solid: #74af36;
  --pui-status-danger-bg: #fce9e8;
  --pui-status-danger-fg: #5b0e0d;
  --pui-status-danger-solid: #da4144;
  --pui-status-warning-bg: #fef9e9;
  --pui-status-warning-fg: #634e0f;
  --pui-status-warning-solid: #f9c426;
  --pui-status-info-bg: #e9e9fb;
  --pui-status-info-fg: #110e56;
  --pui-status-info-solid: #2b25d9;
  --pui-tint-neutral-bg: #dad9d9;
  --pui-tint-neutral-fg: #544d4d;
  --pui-tint-blue-bg: #d4d3f7;
  --pui-tint-blue-fg: #6a66e4;
  --pui-tint-red-bg: #f9d3d2;
  --pui-tint-red-fg: #ec6663;
  --pui-tint-yellow-bg: #fad567;
  --pui-tint-yellow-fg: #634e0f;
  --pui-tint-green-bg: #d4f2de;
  --pui-tint-green-fg: #1a6b36;
  --pui-elevation-flat: 0px 1px 2px 0px #0000000d;
  --pui-elevation-card: 0px 24px 48px -12px #0000002e;
  --pui-elevation-floating: 0px 24px 64px 0px #1510511f;
  --pui-elevation-modal: 0px 32px 64px 0px #00000024;
  /* deprecated: use elevation.modal - the Navigation menu wears it (request 1, Fedor 2026-09-25, D161). Kept one minor as an alias; removed in the next major. */
  --pui-elevation-bar: 0px 32px 64px 0px #00000024;
  --pui-motion-state: 150ms;
  --pui-motion-move: 200ms;
  --pui-motion-menu: 250ms;
  --pui-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pui-motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --pui-layout-gutter: 24px;
  --pui-layout-section-gap: 32px;
  --pui-layout-heading-gap: 64px;
  --pui-layout-card-padding: 20px;
  --pui-layout-card-gap: 12px;
  --pui-layout-bullet-gap: 8px;
  --pui-layout-content-width: 1320px;
  --pui-layout-slide-margin: 64px;
  --pui-chart-text: #0b0202;
  --pui-chart-grid: #00000012;
  --pui-chart-rest: #dad9d9;
  --pui-chart-on-fill: #ffffff;
  --pui-sequence-1: #e42521;
  --pui-sequence-2: #f9c426;
  --pui-sequence-3: #2b25d9;
  --pui-sequence-4: #6a66e4;
  --pui-sequence-5: #858080;
  --pui-sequence-6: #ec6663;

  /* Typography: web-desktop is the default canvas. */
  --pui-type-display-large-font-family: Poppins, sans-serif;
  --pui-type-display-large-font-size: 148px;
  --pui-type-display-large-font-weight: 600;
  --pui-type-display-large-line-height: 1.2;
  --pui-type-display-large-letter-spacing: -0.01em;
  --pui-type-display-medium-font-family: Poppins, sans-serif;
  --pui-type-display-medium-font-size: 117px;
  --pui-type-display-medium-font-weight: 600;
  --pui-type-display-medium-line-height: 1.2;
  --pui-type-display-medium-letter-spacing: -0.01em;
  --pui-type-display-small-font-family: Poppins, sans-serif;
  --pui-type-display-small-font-size: 92px;
  --pui-type-display-small-font-weight: 600;
  --pui-type-display-small-line-height: 1.2;
  --pui-type-display-small-letter-spacing: -0.01em;
  --pui-type-headline-large-font-family: Poppins, sans-serif;
  --pui-type-headline-large-font-size: 65px;
  --pui-type-headline-large-font-weight: 600;
  --pui-type-headline-large-line-height: 1.2;
  --pui-type-headline-large-letter-spacing: 0px;
  --pui-type-headline-medium-font-family: Poppins, sans-serif;
  --pui-type-headline-medium-font-size: 45px;
  --pui-type-headline-medium-font-weight: 600;
  --pui-type-headline-medium-line-height: 1.2;
  --pui-type-headline-medium-letter-spacing: 0px;
  --pui-type-headline-small-font-family: Poppins, sans-serif;
  --pui-type-headline-small-font-size: 40px;
  --pui-type-headline-small-font-weight: 400;
  --pui-type-headline-small-line-height: 1.2;
  --pui-type-headline-small-letter-spacing: 0px;
  --pui-type-title-large-font-family: Poppins, sans-serif;
  --pui-type-title-large-font-size: 36px;
  --pui-type-title-large-font-weight: 600;
  --pui-type-title-large-line-height: 1.2;
  --pui-type-title-large-letter-spacing: 0px;
  --pui-type-title-medium-font-family: Poppins, sans-serif;
  --pui-type-title-medium-font-size: 32px;
  --pui-type-title-medium-font-weight: 600;
  --pui-type-title-medium-line-height: 1.2;
  --pui-type-title-medium-letter-spacing: 0px;
  --pui-type-title-small-font-family: Poppins, sans-serif;
  --pui-type-title-small-font-size: 28px;
  --pui-type-title-small-font-weight: 500;
  --pui-type-title-small-line-height: 1.4;
  --pui-type-title-small-letter-spacing: 0px;
  --pui-type-body-large-font-family: Poppins, sans-serif;
  --pui-type-body-large-font-size: 22px;
  --pui-type-body-large-font-weight: 400;
  --pui-type-body-large-line-height: 1.4;
  --pui-type-body-large-letter-spacing: 0px;
  --pui-type-body-medium-font-family: Poppins, sans-serif;
  --pui-type-body-medium-font-size: 18px;
  --pui-type-body-medium-font-weight: 400;
  --pui-type-body-medium-line-height: 1.4;
  --pui-type-body-medium-letter-spacing: 0px;
  --pui-type-body-small-font-family: Poppins, sans-serif;
  --pui-type-body-small-font-size: 16px;
  --pui-type-body-small-font-weight: 400;
  --pui-type-body-small-line-height: 1.5;
  --pui-type-body-small-letter-spacing: 0px;
  --pui-type-body-x-small-font-family: Poppins, sans-serif;
  --pui-type-body-x-small-font-size: 14px;
  --pui-type-body-x-small-font-weight: 400;
  --pui-type-body-x-small-line-height: 1.7;
  --pui-type-body-x-small-letter-spacing: 0px;
  --pui-type-label-medium-font-family: Poppins, sans-serif;
  --pui-type-label-medium-font-size: 12px;
  --pui-type-label-medium-font-weight: 500;
  --pui-type-label-medium-line-height: 1.4;
  --pui-type-label-medium-letter-spacing: 0.1em;

  /* The page's section steps: web-desktop is the default canvas; the media blocks below re-set them. */
  --pui-layout-page-section-gap: 128px;
  --pui-layout-page-section-gap-tight: 64px;

  /* The default accent: blue, the Accent collection's first mode — what a component reads where no
     data-accent is set on it or above it. */
  --pui-accent-main: #2b25d9;
  --pui-accent-light: #6a66e4;
  --pui-accent-lighter: #d4d3f7;
  --pui-accent-bg: #e9e9fb;
  --pui-accent-dark: #0c0b41;
  --pui-accent-on-accent: #ffffff;
  --pui-accent-heading: #6a66e4;
  --pui-accent-icon-ink: #6a66e4;
  --pui-accent-text: #2b25d9;
  --pui-accent-selected: #e9e9fb;
  --pui-accent-pill-tint: #d4d3f7;
  --pui-accent-chart-1: #2b25d9;
  --pui-accent-chart-2: #6a66e4;
  --pui-accent-chart-3: #d4d3f7;
  --pui-accent-chart-4: #b5b3b3;
  --pui-accent-chart-5: #dad9d9;
  --pui-accent-gradient-far: #f24288;
  --pui-accent-blob-opacity: 0.2;
}

/* Accent modes. Paggy's data-accent system, promoted to the token source.
   Set data-accent on any element and every --pui-accent-* below re-resolves. */

[data-accent="blue"] {
  --pui-accent-main: #2b25d9;
  --pui-accent-light: #6a66e4;
  --pui-accent-lighter: #d4d3f7;
  --pui-accent-bg: #e9e9fb;
  --pui-accent-dark: #0c0b41;
  --pui-accent-on-accent: #ffffff;
  --pui-accent-heading: #6a66e4;
  --pui-accent-icon-ink: #6a66e4;
  --pui-accent-text: #2b25d9;
  --pui-accent-selected: #e9e9fb;
  --pui-accent-pill-tint: #d4d3f7;
  --pui-accent-chart-1: #2b25d9;
  --pui-accent-chart-2: #6a66e4;
  --pui-accent-chart-3: #d4d3f7;
  --pui-accent-chart-4: #b5b3b3;
  --pui-accent-chart-5: #dad9d9;
  --pui-accent-gradient-far: #f24288;
  --pui-accent-blob-opacity: 0.2;
  --pui-icon-list-ink: #6a66e4;
  --pui-table-header-bg: #0c0b41;
  --pui-table-header-pill-tint: #d4d3f7;
  --pui-table-row-selected-bg: #e9e9fb;
}

[data-accent="red"] {
  --pui-accent-main: #e42521;
  --pui-accent-light: #ec6663;
  --pui-accent-lighter: #f9d3d2;
  --pui-accent-bg: #fce9e8;
  --pui-accent-dark: #440b09;
  --pui-accent-on-accent: #ffffff;
  --pui-accent-heading: #ec6663;
  --pui-accent-icon-ink: #ec6663;
  --pui-accent-text: #e42521;
  --pui-accent-selected: #fce9e8;
  --pui-accent-pill-tint: #f9d3d2;
  --pui-accent-chart-1: #e42521;
  --pui-accent-chart-2: #ec6663;
  --pui-accent-chart-3: #f9d3d2;
  --pui-accent-chart-4: #b5b3b3;
  --pui-accent-chart-5: #dad9d9;
  --pui-accent-gradient-far: #d947d6;
  --pui-accent-blob-opacity: 0.2;
  --pui-icon-list-ink: #ec6663;
  --pui-table-header-bg: #440b09;
  --pui-table-header-pill-tint: #f9d3d2;
  --pui-table-row-selected-bg: #fce9e8;
}

[data-accent="yellow"] {
  --pui-accent-main: #f9c426;
  --pui-accent-light: #fad567;
  --pui-accent-lighter: #fdf3d3;
  --pui-accent-bg: #fef9e9;
  --pui-accent-dark: #4a3a0b;
  --pui-accent-on-accent: #0b0202;
  --pui-accent-heading: #858080;
  --pui-accent-icon-ink: #f9c426;
  --pui-accent-text: #0b0202;
  --pui-accent-selected: #fef9e9;
  --pui-accent-pill-tint: #fad567;
  --pui-accent-chart-1: #f9c426;
  --pui-accent-chart-2: #858080;
  --pui-accent-chart-3: #dad9d9;
  --pui-accent-chart-4: #fad567;
  --pui-accent-chart-5: #b5b3b3;
  --pui-accent-gradient-far: #ebb8fc;
  --pui-accent-blob-opacity: 0.35;
  --pui-icon-list-ink: #f9c426;
  --pui-table-header-bg: #4a3a0b;
  --pui-table-header-pill-tint: #fad567;
  --pui-table-row-selected-bg: #fef9e9;
}

[data-accent="multicolor"] {
  --pui-accent-main: #e42521;
  --pui-accent-light: #ec6663;
  --pui-accent-lighter: #f9d3d2;
  --pui-accent-bg: #fce9e8;
  --pui-accent-dark: #231b1b;
  --pui-accent-on-accent: #ffffff;
  --pui-accent-heading: #858080;
  --pui-accent-icon-ink: #ec6663;
  --pui-accent-text: #e42521;
  --pui-accent-selected: #dad9d9;
  --pui-accent-pill-tint: #dad9d9;
  --pui-accent-chart-1: #e42521;
  --pui-accent-chart-2: #f9c426;
  --pui-accent-chart-3: #2b25d9;
  --pui-accent-chart-4: #b5b3b3;
  --pui-accent-chart-5: #ec6663;
  --pui-accent-gradient-far: #d947d6;
  --pui-accent-blob-opacity: 0.2;
  --pui-icon-list-ink: #ec6663;
  --pui-table-header-bg: #231b1b;
  --pui-table-header-pill-tint: #dad9d9;
  --pui-table-row-selected-bg: #dad9d9;
}

/* Ground modes. A grey surface is one step darker than the ground it sits on: neutral/100 on the white
   page, neutral/200 on the product ground surface/card; the segmented Tabs' box is white there.
   Set data-ground="card" on the element that paints surface/card as the ground of a screen and every
   role below re-resolves for what sits on it; data-ground="page" on a white container inside it puts
   them back. The parts of @pepperui/css that paint a ground set the same values themselves. */

[data-ground="page"] {
  --pui-tabs-track: #f2f2f2;
  --pui-kpi-tone-neutral-bg: #f2f2f2;
  --pui-surface-sunken: #f2f2f2;
}

[data-ground="card"] {
  --pui-tabs-track: #ffffff;
  --pui-kpi-tone-neutral-bg: #dad9d9;
  --pui-surface-sunken: #dad9d9;
}

/* Canvas modes. The slide canvas is fixed at 1920x1080 and never responsive,
   so it is opted into explicitly rather than reached by a breakpoint. */

[data-canvas="slide"] {
  --pui-type-display-small-font-family: Poppins, sans-serif;
  --pui-type-display-small-font-size: 64px;
  --pui-type-display-small-font-weight: 600;
  --pui-type-display-small-line-height: 1.2;
  --pui-type-display-small-letter-spacing: 0px;
  --pui-type-headline-large-font-family: Poppins, sans-serif;
  --pui-type-headline-large-font-size: 66px;
  --pui-type-headline-large-font-weight: 600;
  --pui-type-headline-large-line-height: 1.2;
  --pui-type-headline-large-letter-spacing: -0.01em;
  --pui-type-headline-medium-font-family: Poppins, sans-serif;
  --pui-type-headline-medium-font-size: 46px;
  --pui-type-headline-medium-font-weight: 500;
  --pui-type-headline-medium-line-height: 1.2;
  --pui-type-headline-medium-letter-spacing: -0.01em;
  --pui-type-headline-small-font-family: Poppins, sans-serif;
  --pui-type-headline-small-font-size: 41px;
  --pui-type-headline-small-font-weight: 400;
  --pui-type-headline-small-line-height: 1.5;
  --pui-type-headline-small-letter-spacing: 0px;
  --pui-type-title-large-font-family: Poppins, sans-serif;
  --pui-type-title-large-font-size: 36px;
  --pui-type-title-large-font-weight: 600;
  --pui-type-title-large-line-height: 1.2;
  --pui-type-title-large-letter-spacing: 0px;
  --pui-type-title-small-font-family: Poppins, sans-serif;
  --pui-type-title-small-font-size: 26px;
  --pui-type-title-small-font-weight: 500;
  --pui-type-title-small-line-height: 1.4;
  --pui-type-title-small-letter-spacing: 0px;
  --pui-type-body-large-font-family: Poppins, sans-serif;
  --pui-type-body-large-font-size: 26px;
  --pui-type-body-large-font-weight: 400;
  --pui-type-body-large-line-height: 1.4;
  --pui-type-body-large-letter-spacing: 0px;
  --pui-type-body-medium-font-family: Poppins, sans-serif;
  --pui-type-body-medium-font-size: 20px;
  --pui-type-body-medium-font-weight: 400;
  --pui-type-body-medium-line-height: 1.4;
  --pui-type-body-medium-letter-spacing: 0px;
  --pui-type-body-small-font-family: Poppins, sans-serif;
  --pui-type-body-small-font-size: 18px;
  --pui-type-body-small-font-weight: 500;
  --pui-type-body-small-line-height: 1.4;
  --pui-type-body-small-letter-spacing: 0px;
  --pui-type-label-medium-font-family: Poppins, sans-serif;
  --pui-type-label-medium-font-size: 15px;
  --pui-type-label-medium-font-weight: 400;
  --pui-type-label-medium-line-height: 1.4;
  --pui-type-label-medium-letter-spacing: 0px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --pui-type-headline-large-font-family: Poppins, sans-serif;
    --pui-type-headline-large-font-size: 65px;
    --pui-type-headline-large-font-weight: 600;
    --pui-type-headline-large-line-height: 1.2;
    --pui-type-headline-large-letter-spacing: 0px;
    --pui-type-headline-medium-font-family: Poppins, sans-serif;
    --pui-type-headline-medium-font-size: 45px;
    --pui-type-headline-medium-font-weight: 600;
    --pui-type-headline-medium-line-height: 1.2;
    --pui-type-headline-medium-letter-spacing: 0px;
    --pui-type-headline-small-font-family: Poppins, sans-serif;
    --pui-type-headline-small-font-size: 40px;
    --pui-type-headline-small-font-weight: 400;
    --pui-type-headline-small-line-height: 1.2;
    --pui-type-headline-small-letter-spacing: 0px;
    --pui-type-title-large-font-family: Poppins, sans-serif;
    --pui-type-title-large-font-size: 32px;
    --pui-type-title-large-font-weight: 600;
    --pui-type-title-large-line-height: 1.2;
    --pui-type-title-large-letter-spacing: 0px;
    --pui-type-title-medium-font-family: Poppins, sans-serif;
    --pui-type-title-medium-font-size: 28px;
    --pui-type-title-medium-font-weight: 600;
    --pui-type-title-medium-line-height: 1.2;
    --pui-type-title-medium-letter-spacing: 0px;
    --pui-type-title-small-font-family: Poppins, sans-serif;
    --pui-type-title-small-font-size: 25px;
    --pui-type-title-small-font-weight: 500;
    --pui-type-title-small-line-height: 1.4;
    --pui-type-title-small-letter-spacing: 0px;
    --pui-type-body-large-font-family: Poppins, sans-serif;
    --pui-type-body-large-font-size: 18px;
    --pui-type-body-large-font-weight: 400;
    --pui-type-body-large-line-height: 1.4;
    --pui-type-body-large-letter-spacing: 0px;
    --pui-type-body-medium-font-family: Poppins, sans-serif;
    --pui-type-body-medium-font-size: 16px;
    --pui-type-body-medium-font-weight: 400;
    --pui-type-body-medium-line-height: 1.4;
    --pui-type-body-medium-letter-spacing: 0px;
    --pui-type-body-small-font-family: Poppins, sans-serif;
    --pui-type-body-small-font-size: 14px;
    --pui-type-body-small-font-weight: 400;
    --pui-type-body-small-line-height: 1.5;
    --pui-type-body-small-letter-spacing: 0px;
    --pui-type-body-x-small-font-family: Poppins, sans-serif;
    --pui-type-body-x-small-font-size: 12px;
    --pui-type-body-x-small-font-weight: 400;
    --pui-type-body-x-small-line-height: 1.7;
    --pui-type-body-x-small-letter-spacing: 0px;
    --pui-layout-page-section-gap: 80px;
    --pui-layout-page-section-gap-tight: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --pui-type-headline-large-font-family: Poppins, sans-serif;
    --pui-type-headline-large-font-size: 48px;
    --pui-type-headline-large-font-weight: 600;
    --pui-type-headline-large-line-height: 1.2;
    --pui-type-headline-large-letter-spacing: 0px;
    --pui-type-headline-medium-font-family: Poppins, sans-serif;
    --pui-type-headline-medium-font-size: 40px;
    --pui-type-headline-medium-font-weight: 600;
    --pui-type-headline-medium-line-height: 1.2;
    --pui-type-headline-medium-letter-spacing: 0px;
    --pui-type-headline-small-font-family: Poppins, sans-serif;
    --pui-type-headline-small-font-size: 32px;
    --pui-type-headline-small-font-weight: 400;
    --pui-type-headline-small-line-height: 1.2;
    --pui-type-headline-small-letter-spacing: 0px;
    --pui-type-title-large-font-family: Poppins, sans-serif;
    --pui-type-title-large-font-size: 32px;
    --pui-type-title-large-font-weight: 600;
    --pui-type-title-large-line-height: 1.2;
    --pui-type-title-large-letter-spacing: 0px;
    --pui-type-title-medium-font-family: Poppins, sans-serif;
    --pui-type-title-medium-font-size: 28px;
    --pui-type-title-medium-font-weight: 600;
    --pui-type-title-medium-line-height: 1.2;
    --pui-type-title-medium-letter-spacing: 0px;
    --pui-type-title-small-font-family: Poppins, sans-serif;
    --pui-type-title-small-font-size: 25px;
    --pui-type-title-small-font-weight: 500;
    --pui-type-title-small-line-height: 1.4;
    --pui-type-title-small-letter-spacing: 0px;
    --pui-type-body-large-font-family: Poppins, sans-serif;
    --pui-type-body-large-font-size: 18px;
    --pui-type-body-large-font-weight: 400;
    --pui-type-body-large-line-height: 1.4;
    --pui-type-body-large-letter-spacing: 0px;
    --pui-type-body-medium-font-family: Poppins, sans-serif;
    --pui-type-body-medium-font-size: 16px;
    --pui-type-body-medium-font-weight: 400;
    --pui-type-body-medium-line-height: 1.4;
    --pui-type-body-medium-letter-spacing: 0px;
    --pui-type-body-small-font-family: Poppins, sans-serif;
    --pui-type-body-small-font-size: 14px;
    --pui-type-body-small-font-weight: 400;
    --pui-type-body-small-line-height: 1.5;
    --pui-type-body-small-letter-spacing: 0px;
    --pui-type-body-x-small-font-family: Poppins, sans-serif;
    --pui-type-body-x-small-font-size: 12px;
    --pui-type-body-x-small-font-weight: 400;
    --pui-type-body-x-small-line-height: 1.7;
    --pui-type-body-x-small-letter-spacing: 0px;
    --pui-layout-page-section-gap: 40px;
    --pui-layout-page-section-gap-tight: 32px;
  }
}