:root {
  --bg-main: #F4F6F8;
  --bg-surface: rgba(255, 255, 255, 0.72);
  --bg-surface-solid: #FFFFFF;
  --bg-subtle: rgba(255, 255, 255, 0.48);
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #868E96;
  --text-disabled: #ADB5BD;
  --brand-primary: #287FF0;
  --brand-primary-hover: #1769D5;
  --brand-primary-light: #EAF3FF;
  --brand-accent: #FF7A00;
  --success: #2F9E44;
  --warning: #F08C00;
  --danger: #E03131;
  --info: #228BE6;

  --border-color: #E9ECEF;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --glass-border: rgba(255, 255, 255, 0.72);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --border-radius-card: var(--radius-lg);
  --border-radius-btn: var(--radius-md);
  --border-radius-input: var(--radius-sm);

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-blur-sm: 12px;
  --glass-blur: 20px;
  --glass-blur-lg: 28px;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);

  --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --control-height-sm: 40px;
  --control-height: 48px;
  --control-height-lg: 56px;
  --icon-xs: 16px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 32px;

  --transition-fast: 150ms ease;
  --transition-normal: 220ms ease;
  --transition-slow: 320ms ease;

  --content-max-width: 1200px;
  --bottom-nav-max-width: 380px;
  --bottom-nav-min-width-md: 340px;
  --bottom-nav-height: 48px;
  --bottom-nav-height-md: 52px;
  --bottom-nav-pad: 5px;
  --bottom-nav-pad-md: 6px;
  --bottom-nav-item-pad-y: 5px;
  --bottom-nav-item-pad-x: 6px;
  --bottom-nav-item-pad-y-md: 6px;
  --bottom-nav-item-pad-x-md: 8px;
  --bottom-nav-label-gap: 3px;
  --bottom-nav-icon: 20px;
  --bottom-nav-icon-md: 19px;
  --bottom-nav-label: 10px;
  --bottom-nav-label-md: 10px;

  --z-content: 1;
  --z-header: 20;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-bottom-nav: 500;

  --sh-pill-bg: var(--bg-surface);
  --sh-card-radius-compact: var(--radius-xl);
  --sh-card-padding-compact-mobile: var(--space-4);
  --sh-card-padding-compact-desktop: var(--space-5);
  --sh-card-min-height-compact-mobile: 104px;
  --sh-card-min-height-compact-desktop: 96px;
  --sh-card-title-size: 14px;
  --sh-card-title-size-desktop: 16px;
  --sh-card-meta-size: 12px;
  --sh-card-line-height: 1.2;
  --sh-card-content-gap: var(--space-2);

  --sh-ui-space-3: var(--space-3);
  --sh-ui-font-size-sm: var(--font-size-sm);
  --sh-ui-font-size-md: var(--font-size-md);
  --sh-ui-line-height-base: var(--line-height-normal);
  --sh-ui-line-height-tight: var(--line-height-tight);
  --sh-ui-pill-radius: var(--radius-pill);
  --sh-ui-card-radius: var(--radius-lg);
  --sh-ui-button-height: var(--control-height);
  --sh-ui-input-height: var(--control-height);
  --sh-ui-input-textarea-min: 96px;
  --sh-ui-button-padding-inline: var(--space-4);
  --sh-ui-icon-button-size: 48px;
  --sh-ui-field-max: 520px;
  --sh-ui-modal-max: 720px;
  --sh-ui-modal-radius: var(--radius-2xl);
  --sh-ui-surface-bg: var(--glass-bg);
  --sh-ui-surface-bg-hover: var(--glass-bg-strong);
  --sh-ui-surface-border: var(--border-subtle);
  --sh-ui-surface-border-strong: var(--glass-border);
  --sh-ui-modal-bg: var(--bg-surface-solid);
  --sh-ui-modal-shadow: var(--shadow-lg);
  --sh-ui-floating-shadow: var(--shadow-md);
  --sh-ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --sh-ui-disabled-opacity: 0.55;
  --sh-ui-disabled-saturation: 0.6;
  --sh-ui-hover-lift: 1px;
  --sh-ui-overlay-bg: rgba(0, 0, 0, 0.42);
  --sh-ui-overlay-blur: blur(var(--glass-blur));

  --lg-fast: 150ms;
  --lg-medium: 220ms;
  --lg-slow: 320ms;
  --lg-ease-fluid: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lg-radius-pill: var(--radius-pill);
  --lg-surface-bg: var(--glass-bg);
  --lg-surface-bg-strong: var(--glass-bg-strong);
  --lg-surface-border: var(--border-subtle);
  --lg-shadow-soft: var(--shadow-sm);
  --lg-shadow-press: var(--shadow-xs);
  --lg-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --lg-blur: blur(var(--glass-blur));
  --lg-press-scale: 0.98;
  --lg-bg-base: var(--bg-main);
  --lg-bg-mesh-a: var(--brand-primary-light);
}

html.wp-dark-mode-active body,
body.wp-dark-mode-active {
  --bg-main: #0F1115;
  --bg-surface: rgba(18, 20, 26, 0.72);
  --bg-surface-solid: #12141A;
  --bg-subtle: rgba(18, 20, 26, 0.52);
  --text-primary: #F5F5F7;
  --text-secondary: rgba(245, 245, 247, 0.82);
  --text-muted: rgba(245, 245, 247, 0.62);
  --text-disabled: rgba(245, 245, 247, 0.44);
  --border-color: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.14);
  --brand-primary: #0A84FF;

  --glass-bg: rgba(18, 20, 26, 0.58);
  --glass-bg-strong: rgba(18, 20, 26, 0.78);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);

  --sh-ui-overlay-bg: rgba(0, 0, 0, 0.62);
  --sh-ui-modal-bg: rgba(18, 20, 26, 0.94);
  --lg-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Ці псевдоніми обчислюються там, де оголошені (:root = html),
     а html не отримує клас dark-mode — тож без редекларації тут
     вони лишаються "замороженими" на світлих значеннях, навіть
     коли --glass-bg/--border-subtle/--shadow-* вище вже темні */
  --sh-pill-bg: var(--bg-surface);
  --sh-ui-surface-bg: var(--glass-bg);
  --sh-ui-surface-bg-hover: var(--glass-bg-strong);
  --sh-ui-surface-border: var(--border-subtle);
  --sh-ui-surface-border-strong: var(--glass-border);
  --sh-ui-floating-shadow: var(--shadow-md);
  --lg-surface-bg: var(--glass-bg);
  --lg-surface-bg-strong: var(--glass-bg-strong);
  --lg-surface-border: var(--border-subtle);
  --lg-shadow-soft: var(--shadow-sm);
  --lg-shadow-press: var(--shadow-xs);
  --lg-bg-base: var(--bg-main);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: #FFFFFF;
    --glass-bg-strong: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F7F8FA;
  }
  html.wp-dark-mode-active body,
  body.wp-dark-mode-active {
    --glass-bg: #12141A;
    --glass-bg-strong: #12141A;
    --bg-surface: #12141A;
    --bg-subtle: #0F1115;
  }
}