/**
 * `pg-quantum-theme` — **tonal elevated**.
 *
 * The Material register: no border at all, elevation instead; a violet accent
 * carried through *tonal surfaces* rather than lines; state expressed as
 * translucent layers over the row rather than as rails or rules; 12px container
 * radius with fully-round chips; and the loosest density of the four.
 *
 * ## State layers
 *
 * Material's model is that hover, focus and selection are semi-transparent
 * *layers* composited over a component, not replacement colours. Expressed here
 * as `color-mix(… var(--pg-colors-primary) N%, transparent)` at 8% for hover and
 * 12% for selection, the two compose correctly when a hovered row is also
 * selected — which a pair of opaque backgrounds could not do.
 *
 * See `theme-ion.ts` for the shared rules on selector roots (container class vs
 * `[data-pg-variant]` for portaled overlays) and on why row height is not set
 * in CSS.
 */
export declare const themeQuantumCss = "\n\n/* \u2500\u2500 Tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-grid,\n[data-pg-variant=\"quantum\"] .pg-context-menu,\n[data-pg-variant=\"quantum\"] .pg-column-context-menu,\n[data-pg-variant=\"quantum\"] .pg-col-chooser__overlay,\n[data-pg-variant=\"quantum\"] .pg-dropdown-editor__panel,\n[data-pg-variant=\"quantum\"] .pg-toast-layer {\n  --pg-colors-primary: #6750a4;\n  --pg-colors-primary-hover: #5b4691;\n  --pg-colors-primary-active: #4f3d7e;\n  --pg-colors-primary-subtle: color-mix(in srgb, #6750a4 8%, transparent);\n  --pg-colors-primary-subtle-hover: color-mix(in srgb, #6750a4 12%, transparent);\n  --pg-colors-primary-soft: color-mix(in srgb, #6750a4 20%, transparent);\n\n  /* Tonal surfaces: chrome is the accent at low saturation over the mode's own\n     surface, which is what gives Material its \"tinted paper\" quality. Mixing\n     against a mode token (rather than white) keeps it correct in dark mode. */\n  --pg-quantum-tonal: color-mix(in srgb, #6750a4 8%, var(--pg-colors-surface));\n  --pg-colors-header-background: var(--pg-quantum-tonal);\n  --pg-colors-filter-background: var(--pg-quantum-tonal);\n  --pg-colors-footer-background: var(--pg-quantum-tonal);\n  --pg-colors-group-row-background: var(--pg-quantum-tonal);\n  --pg-colors-group-footer-background: var(--pg-quantum-tonal);\n  --pg-colors-scrollbar-bg: transparent;\n  --pg-colors-scrollbar-track: transparent;\n\n  /* State layers \u2014 see the module doc. */\n  --pg-colors-row-hover: var(--pg-colors-primary-subtle);\n  --pg-colors-row-selected: var(--pg-colors-primary-subtle-hover);\n  --pg-colors-chip-background: color-mix(in srgb, #6750a4 14%, var(--pg-colors-surface));\n  --pg-colors-chip-text: var(--pg-colors-primary);\n  --pg-colors-group-zone-over: var(--pg-colors-primary-soft);\n\n  --pg-typography-font-family: Roboto, 'Helvetica Neue', system-ui, Arial, sans-serif;\n  --pg-typography-font-size-md: 14px;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-header-font-weight: 500;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 56px;\n\n  /* Generous, consistently round. */\n  --pg-borders-radius-lg: 12px;\n  --pg-borders-radius-md: 8px;\n  --pg-borders-radius-sm: 4px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-borders-width-focus: 4px;\n  --pg-sizing-checkbox-size: 18px;\n\n  /* Material's standard easing and a deliberately unhurried duration. */\n  --pg-transitions-duration-fast: 150ms;\n  --pg-transitions-duration-base: 200ms;\n  --pg-transitions-easing-base: cubic-bezier(0.2, 0, 0, 1);\n\n  /* Material tonal palette. */\n  --pg-chart-series-1: #6750a4;\n  --pg-chart-series-2: #7d5260;\n  --pg-chart-series-3: #386a20;\n  --pg-chart-series-4: #00639b;\n  --pg-chart-series-5: #8c4a00;\n  --pg-chart-series-6: #6f5b40;\n}\n\n/* \u2500\u2500 Shell \u2014 elevation instead of a border \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-grid {\n  border: none;\n  border-radius: var(--pg-borders-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--pg-shadows-lg);\n}\n\n/* \u2500\u2500 Header \u2014 tonal fill, sentence case, no rule \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-th {\n  text-transform: none;\n  font-size: 12px;\n  font-weight: var(--pg-typography-header-font-weight);\n  letter-spacing: var(--pg-typography-letter-spacing-wide);\n  color: var(--pg-colors-header-text);\n}\n\n/* The tonal surface is the separator \u2014 a rule under it would be redundant. */\n.pg-quantum-theme .pg-grid__header {\n  border-bottom: none;\n}\n\n.pg-quantum-theme .pg-th--sorted {\n  color: var(--pg-colors-primary);\n  font-weight: 600;\n}\n\n.pg-quantum-theme .pg-th--sortable:hover {\n  background: var(--pg-colors-primary-subtle);\n}\n\n/* \u2500\u2500 Rows and cells \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* No dividers at all: rows are separated by rhythm and state layers. */\n.pg-quantum-theme .pg-row {\n  border-bottom: none;\n}\n\n.pg-quantum-theme .pg-cell--v-border {\n  border-right-color: transparent;\n}\n\n/* Selection is the 12% layer from the token above \u2014 no rail, no border. */\n.pg-quantum-theme .pg-row--selected {\n  box-shadow: none;\n}\n\n/* \u2500\u2500 Focus \u2014 a wide, soft ripple ring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-th:focus-visible,\n.pg-quantum-theme .pg-cell:focus-visible,\n.pg-quantum-theme .pg-pagination__btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--pg-borders-width-focus)\n    color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n\n/* \u2500\u2500 Checkbox \u2014 18px, ripple halo on hover and focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--pg-sizing-checkbox-size);\n  height: var(--pg-sizing-checkbox-size);\n  border: 2px solid var(--pg-colors-checkbox-border);\n  border-radius: var(--pg-borders-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition:\n    background var(--pg-transitions-duration-fast) var(--pg-transitions-easing-base),\n    border-color var(--pg-transitions-duration-fast) var(--pg-transitions-easing-base),\n    box-shadow var(--pg-transitions-duration-fast) var(--pg-transitions-easing-base);\n}\n/* The halo is a box-shadow rather than a pseudo-element so it cannot affect\n   layout or the row's hit area. */\n.pg-quantum-theme .pg-checkbox:hover {\n  border-color: var(--pg-colors-primary);\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);\n}\n.pg-quantum-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n.pg-quantum-theme .pg-checkbox:checked,\n.pg-quantum-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-quantum-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 1px;\n  width: 5px;\n  height: 10px;\n  border: 2px solid var(--pg-colors-on-primary);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-quantum-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 10px;\n  height: 2px;\n  background: var(--pg-colors-on-primary);\n  transform: translateY(-50%);\n}\n\n/* \u2500\u2500 Grouping bar \u2014 fully-round tonal chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-group-drop-zone {\n  background: var(--pg-quantum-tonal);\n  border-bottom: none;\n}\n\n.pg-quantum-theme .pg-group-chip {\n  background: var(--pg-colors-chip-background);\n  color: var(--pg-colors-chip-text);\n  border: none;\n  border-radius: var(--pg-borders-radius-pill);\n  font-weight: 500;\n  padding-inline: 12px;\n}\n\n/* \u2500\u2500 Footer / pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-grid__footer {\n  border-top: none;\n}\n\n/* Circular buttons with a ripple layer \u2014 the Material icon-button idiom. */\n.pg-quantum-theme .pg-pagination__btn {\n  border-radius: var(--pg-borders-radius-pill);\n  transition: background var(--pg-transitions-duration-fast) var(--pg-transitions-easing-base);\n}\n.pg-quantum-theme .pg-pagination__btn:hover:not(:disabled) {\n  background: var(--pg-colors-primary-subtle-hover);\n  color: var(--pg-colors-primary);\n}\n\n/* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-quantum-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-quantum-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* \u2500\u2500 Overlays \u2014 elevated cards, matching the shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n[data-pg-variant=\"quantum\"] .pg-context-menu,\n[data-pg-variant=\"quantum\"] .pg-column-context-menu,\n[data-pg-variant=\"quantum\"] .pg-dropdown-editor__panel {\n  border-radius: var(--pg-borders-radius-md);\n  border: none;\n  box-shadow: var(--pg-shadows-dropdown);\n  background: var(--pg-quantum-tonal, var(--pg-colors-surface));\n  padding-block: 8px;\n}\n\n[data-pg-variant=\"quantum\"] .pg-context-menu__item,\n[data-pg-variant=\"quantum\"] .pg-col-ctx-menu__item {\n  border-radius: var(--pg-borders-radius-pill);\n  margin-inline: 8px;\n}\n[data-pg-variant=\"quantum\"] .pg-context-menu__item:hover,\n[data-pg-variant=\"quantum\"] .pg-col-ctx-menu__item:hover {\n  background: var(--pg-colors-primary-subtle-hover);\n  color: var(--pg-colors-primary);\n}\n\n[data-pg-variant=\"quantum\"] .pg-toast {\n  border-radius: var(--pg-borders-radius-md);\n  box-shadow: var(--pg-shadows-lg);\n}\n\n/* \u2500\u2500 Motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-quantum-theme .pg-grid--row-dragging .pg-row {\n  transition:\n    background var(--pg-transitions-duration-base) var(--pg-transitions-easing-base),\n    top 200ms var(--pg-transitions-easing-base);\n}\n";
//# sourceMappingURL=theme-quantum.d.ts.map