/* SiteGen Pearl v1.0 — справочные токены интерфейса панели.
 * Это не готовые компоненты и не указание менять framework.
 * Подключать к корню .pearl-ui либо перенести значения в текущую систему токенов.
 * Токены не применяются к генерируемому сайту: его параметры в style-presets.json.
 * Все размеры — CSS px; box-sizing: border-box реализуется в существующем reset.
 * Границы shell/card/gallery — декоративные inset/pseudo, без влияния на layout.
 */
:where(.pearl-ui) {
  --pearl-color-canvas: #F4F6FF;
  --pearl-color-surface: #FFFFFF;
  --pearl-color-surface-soft: #F8F9FF;
  --pearl-color-surface-selected: #EEF2FF;
  --pearl-color-text-primary: #10152E;
  --pearl-color-text-secondary: #555E78;
  --pearl-color-text-muted: #64708B;
  --pearl-color-text-disabled: #8991A7;
  --pearl-color-accent: #315EFF;
  --pearl-color-accent-hover: #244FE0;
  --pearl-color-accent-pressed: #1E43C4;
  --pearl-color-border: #DCE2F3;
  --pearl-color-border-control: #7E8AA6;
  --pearl-color-success: #16794A;
  --pearl-color-success-soft: #EAF7F0;
  --pearl-color-warning: #916000;
  --pearl-color-warning-soft: #FFF6DC;
  --pearl-color-danger: #BD2F40;
  --pearl-color-danger-soft: #FFF0F2;
  --pearl-color-overlay: rgba(16, 21, 46, .28);
  --pearl-color-progress-track: #E4E9FA;
  --pearl-color-field-focus: rgba(49, 94, 255, .18);
  --pearl-canvas-decoration:
    radial-gradient(ellipse at 20% 8%, rgba(103, 133, 255, .10), transparent 52%),
    radial-gradient(ellipse at 92% 90%, rgba(178, 166, 255, .08), transparent 48%);

  --pearl-glass-shell-bg: rgba(255, 255, 255, .82);
  --pearl-glass-shell-outline: rgba(255, 255, 255, .92);
  --pearl-glass-shell-blur: 24px;
  --pearl-glass-shell-saturation: 115%;
  --pearl-card-bg: rgba(255, 255, 255, .96);
  --pearl-selected-bg: #F8FAFF;
  --pearl-glass-actions-bg: rgba(255, 255, 255, .92);
  --pearl-glass-actions-outline: rgba(255, 255, 255, .95);
  --pearl-glass-actions-blur: 20px;
  --pearl-glass-dialog-bg: rgba(255, 255, 255, .98);
  --pearl-glass-dialog-blur: 20px;
  --pearl-glass-fallback: #F8F9FF;
  --pearl-dialog-background-blur-max: 4px;
  --pearl-shadow-shell: 0 16px 48px rgba(39, 56, 110, .08), 0 2px 8px rgba(39, 56, 110, .04);
  --pearl-shadow-card: 0 8px 24px rgba(38, 58, 125, .06);
  --pearl-shadow-gallery: 0 4px 12px rgba(38, 58, 125, .05);
  --pearl-shadow-selected: 0 8px 24px rgba(49, 94, 255, .14);
  --pearl-shadow-actions: 0 8px 32px rgba(38, 58, 125, .12);
  --pearl-shadow-dialog: 0 24px 80px rgba(24, 38, 86, .20);

  --pearl-space-4: 4px;
  --pearl-space-8: 8px;
  --pearl-space-12: 12px;
  --pearl-space-16: 16px;
  --pearl-space-20: 20px;
  --pearl-space-24: 24px;
  --pearl-space-32: 32px;
  --pearl-space-40: 40px;
  --pearl-space-48: 48px;
  --pearl-space-64: 64px;
  --pearl-space-80: 80px;
  --pearl-space-96: 96px;
  --pearl-stroke: 1px;
  --pearl-selected-ring: 2px;
  --pearl-focus-ring: 3px;
  --pearl-focus-offset: 3px;
  --pearl-icon-small: 18px;
  --pearl-icon: 20px;
  --pearl-icon-large: 24px;
  --pearl-hit-target: 44px;

  --pearl-radius-shell: 24px;
  --pearl-radius-card: 24px;
  --pearl-radius-dialog: 24px;
  --pearl-radius-generation-dialog: 28px;
  --pearl-radius-preview: 12px;
  --pearl-radius-field: 12px;
  --pearl-radius-button: 12px;
  --pearl-radius-card-small: 16px;
  --pearl-radius-actions: 20px;
  --pearl-radius-pill: 999px;

  --pearl-font-family: Inter, system-ui, sans-serif;
  --pearl-font-weight-normal: 400;
  --pearl-font-weight-semibold: 600;
  --pearl-font-weight-heading: 650;
  --pearl-font-screen-size: 32px;
  --pearl-font-screen-line: 40px;
  --pearl-font-block-size: 24px;
  --pearl-font-block-line: 32px;
  --pearl-font-card-size: 18px;
  --pearl-font-card-line: 26px;
  --pearl-font-body-size: 16px;
  --pearl-font-body-line: 24px;
  --pearl-font-field-size: 16px;
  --pearl-font-field-line: 24px;
  --pearl-font-label-size: 14px;
  --pearl-font-label-line: 20px;
  --pearl-font-meta-size: 13px;
  --pearl-font-meta-line: 20px;
  --pearl-font-button-size: 14px;
  --pearl-font-button-line: 20px;
  --pearl-font-progress-size: 64px;
  --pearl-font-progress-line: 72px;
  --pearl-heading-tracking: -.02em;
  --pearl-body-tracking: 0;
  --pearl-copy-max: 70ch;

  /* Breakpoint values are documentation tokens; use literal queries below. */
  --pearl-breakpoint-mobile: 768px;
  --pearl-breakpoint-tablet: 1024px;
  --pearl-breakpoint-full-sidebar: 1280px;
  --pearl-min-viewport: 320px;
  --pearl-shell-outer: 16px;
  --pearl-sidebar-width: 208px;
  --pearl-sidebar-padding: 16px;
  --pearl-sidebar-brand-height: 48px;
  --pearl-sidebar-brand-gap: 10px;
  --pearl-sidebar-logo: 32px;
  --pearl-sidebar-row-height: 44px;
  --pearl-sidebar-row-gap: 4px;
  --pearl-sidebar-group-gap: 24px;
  --pearl-sidebar-profile-height: 52px;
  --pearl-header-height: 64px;
  --pearl-main-padding: 32px;
  --pearl-content-max: 1440px;
  --pearl-stepper-height: 48px;
  --pearl-stepper-top-gap: 32px;
  --pearl-content-after-stepper-gap: 32px;
  --pearl-focus-max: 760px;
  --pearl-focus-padding: 32px;
  --pearl-focus-gap: 24px;
  --pearl-split-min-content: 904px;
  --pearl-split-summary-width: 360px;
  --pearl-split-gap: 24px;
  --pearl-summary-padding: 24px;
  --pearl-summary-viewport-subtraction: 224px;
  --pearl-gallery-three-min-content: 960px;
  --pearl-gallery-two-min-content: 640px;
  --pearl-gallery-gap-three: 24px;
  --pearl-gallery-gap-two: 20px;
  --pearl-gallery-card-padding: 12px;
  --pearl-gallery-preview-ratio: 4 / 3;
  --pearl-gallery-card-min-height: 414px;
  --pearl-gallery-preview-title-gap: 16px;
  --pearl-gallery-controls-min-height: 64px;
  --pearl-actions-height: 72px;
  --pearl-actions-padding-block: 12px;
  --pearl-actions-padding-inline: 16px;
  --pearl-actions-bottom: 32px;
  --pearl-actions-content-bottom-padding: 120px;
  --pearl-actions-primary-width: 184px;
  --pearl-actions-back-min-width: 104px;

  --pearl-button-height: 48px;
  --pearl-button-primary-min-width: 160px;
  --pearl-button-secondary-min-width: 104px;
  --pearl-button-padding-inline: 20px;
  --pearl-button-gap: 8px;
  --pearl-button-compact-height: 40px;
  --pearl-button-compact-padding: 16px;
  --pearl-button-pressed-translate: 1px;
  --pearl-spinner-size: 16px;
  --pearl-field-height: 48px;
  --pearl-field-padding-block: 12px;
  --pearl-field-padding-inline: 14px;
  --pearl-field-label-gap: 8px;
  --pearl-field-helper-gap: 8px;
  --pearl-textarea-min-height: 112px;
  --pearl-textarea-max-height: 320px;
  --pearl-textarea-padding: 14px;
  --pearl-type-card-min-height: 152px;
  --pearl-type-card-padding: 16px;
  --pearl-type-illustration-width: 112px;
  --pearl-type-illustration-height: 72px;
  --pearl-type-three-min-width: 600px;
  --pearl-type-two-min-width: 400px;
  --pearl-goal-chip-min-height: 40px;
  --pearl-goal-chip-padding-block: 8px;
  --pearl-goal-chip-padding-inline: 14px;
  --pearl-palette-swatch: 32px;
  --pearl-palette-gap: 8px;
  --pearl-select-menu-max-height: 320px;
  --pearl-summary-row-min-height: 44px;
  --pearl-summary-thumbnail-width: 88px;
  --pearl-summary-thumbnail-height: 64px;
  --pearl-preview-tab-height: 40px;
  --pearl-preview-tab-padding: 4px;
  --pearl-preview-toolbar-height: 48px;
  --pearl-preview-interactive-min-width: 360px;

  --pearl-dialog-max-width: 560px;
  --pearl-dialog-viewport-gutter-total: 32px;
  --pearl-dialog-padding: 24px;
  --pearl-dialog-body-gap: 24px;
  --pearl-dialog-footer-gap: 12px;
  --pearl-dialog-body-min-height: 160px;
  --pearl-generation-max-width: 880px;
  --pearl-generation-viewport-gutter-total: 48px;
  --pearl-generation-padding: 32px;
  --pearl-generation-reference-min-height: 784px;
  --pearl-generation-circle: 240px;
  --pearl-generation-ring: 8px;
  --pearl-generation-layer-icon: 56px;
  --pearl-generation-row-gap: 32px;
  --pearl-generation-stage-min-height: 48px;
  --pearl-generation-thumbnail-gap: 12px;
  --pearl-generation-thumbnail-footer: 40px;
  --pearl-table-header-height: 44px;
  --pearl-table-row-height: 64px;
  --pearl-table-padding-block: 12px;
  --pearl-table-padding-inline: 16px;
  --pearl-table-name-min-width: 240px;
  --pearl-table-status-width: 144px;
  --pearl-table-date-width: 176px;
  --pearl-table-actions-width: 56px;
  --pearl-menu-min-width: 208px;
  --pearl-menu-row-height: 40px;
  --pearl-toast-width: 360px;
  --pearl-toast-padding: 16px;
  --pearl-toast-viewport-gutter-total: 32px;
  --pearl-toast-inset: 32px;
  --pearl-toast-success-duration: 5s;
  --pearl-toast-info-duration: 7s;
  --pearl-empty-max-width: 480px;
  --pearl-empty-illustration: 64px;

  --pearl-motion-hover: 140ms;
  --pearl-motion-select: 180ms;
  --pearl-motion-step: 220ms;
  --pearl-motion-overlay: 240ms;
  --pearl-motion-collapse: 200ms;
  --pearl-motion-progress: 400ms;
  --pearl-motion-skeleton: 1400ms;
  --pearl-motion-thumbnail: 180ms;
  --pearl-ease-default: ease-out;
  --pearl-ease-select: cubic-bezier(.2, .8, .2, 1);
  --pearl-ease-step: cubic-bezier(.2, .8, .2, 1);
  --pearl-ease-overlay: cubic-bezier(.22, 1, .36, 1);
  --pearl-ease-skeleton: linear;
  --pearl-motion-select-lift-max: 2px;
  --pearl-motion-step-translate: 8px;
  --pearl-motion-overlay-translate: 12px;
  --pearl-motion-overlay-scale: .98;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :where(.pearl-ui) {
    --pearl-shell-outer: 12px;
    --pearl-sidebar-width: 72px;
    --pearl-main-padding: 24px;
  }
}

@media (max-width: 767px) {
  :where(.pearl-ui) {
    --pearl-shell-outer: 0px;
    --pearl-sidebar-width: 0px;
    --pearl-header-height: 56px;
    --pearl-main-padding: 16px;
    --pearl-stepper-height: 44px;
    --pearl-stepper-top-gap: 16px;
    --pearl-content-after-stepper-gap: 24px;
    --pearl-radius-shell: 0px;
    --pearl-radius-card: 20px;
    --pearl-radius-actions: 16px;
    --pearl-focus-padding: 20px;
    --pearl-focus-gap: 20px;
    --pearl-actions-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    --pearl-actions-back-min-width: 88px;
    --pearl-font-screen-size: 28px;
    --pearl-font-screen-line: 36px;
    --pearl-font-block-size: 22px;
    --pearl-font-block-line: 30px;
    --pearl-font-progress-size: 48px;
    --pearl-font-progress-line: 56px;
    --pearl-generation-viewport-gutter-total: 32px;
    --pearl-generation-padding: 20px;
    --pearl-generation-circle: 168px;
  }
}

/* Components must also remove transforms/shimmer/rotation in reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :where(.pearl-ui) {
    --pearl-motion-hover: 0ms;
    --pearl-motion-select: 0ms;
    --pearl-motion-step: 0ms;
    --pearl-motion-overlay: 0ms;
    --pearl-motion-collapse: 0ms;
    --pearl-motion-progress: 0ms;
    --pearl-motion-skeleton: 0ms;
    --pearl-motion-thumbnail: 0ms;
    --pearl-motion-select-lift-max: 0px;
    --pearl-motion-step-translate: 0px;
    --pearl-motion-overlay-translate: 0px;
    --pearl-motion-overlay-scale: 1;
  }
}

/* Fallback values, not a license to nest glass layers. Max three blur surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(.pearl-ui) {
    --pearl-glass-shell-bg: var(--pearl-glass-fallback);
    --pearl-glass-actions-bg: var(--pearl-glass-fallback);
    --pearl-glass-dialog-bg: var(--pearl-glass-fallback);
  }
}

:where(.pearl-ui[data-reduced-transparency="true"]) {
  --pearl-glass-shell-bg: var(--pearl-glass-fallback);
  --pearl-glass-actions-bg: var(--pearl-glass-fallback);
  --pearl-glass-dialog-bg: var(--pearl-glass-fallback);
  --pearl-glass-shell-blur: 0px;
  --pearl-glass-actions-blur: 0px;
  --pearl-glass-dialog-blur: 0px;
}