/*!
 * XK Rehab Scale KB - shared design system
 * Public pages and the administrator console consume this single token set.
 */

:root {
  --xk-color-primary: var(--wpcom-primary-color, var(--wpcom-main-color, var(--wp--preset--color--primary, var(--theme-color, var(--main-color, #2563eb)))));
  --xk-color-primary-hover: #1d4ed8;
  --xk-color-primary-soft: #eef4ff;
  --xk-color-text: var(--wp--preset--color--foreground, #172033);
  --xk-color-text-secondary: #5f6c7d;
  --xk-color-muted: #8591a2;
  --xk-color-background: #f6f8fb;
  --xk-color-surface: #ffffff;
  --xk-color-surface-subtle: #f2f5f8;
  --xk-color-border: #dfe5ec;
  --xk-color-border-strong: #cbd4df;
  --xk-color-success: #147a52;
  --xk-color-success-soft: #eaf7f1;
  --xk-color-warning: #9a5b00;
  --xk-color-warning-soft: #fff5dc;
  --xk-color-danger: #b42318;
  --xk-color-danger-soft: #fff0ee;
  --xk-color-info: #2356a8;
  --xk-color-info-soft: #edf4ff;

  --xk-radius-sm: 4px;
  --xk-radius-md: 6px;
  --xk-radius-lg: 8px;
  --xk-radius-full: 999px;

  --xk-shadow-sm: 0 1px 3px rgba(20, 32, 51, 0.06);
  --xk-shadow-md: 0 8px 24px rgba(20, 32, 51, 0.08);
  --xk-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--xk-color-primary) 20%, transparent);

  --xk-space-xs: 4px;
  --xk-space-sm: 8px;
  --xk-space-md: 16px;
  --xk-space-lg: 24px;
  --xk-space-xl: 32px;
  --xk-space-2xl: 48px;

  --xk-font-size-xs: 12px;
  --xk-font-size-sm: 13px;
  --xk-font-size-md: 15px;
  --xk-font-size-lg: 18px;
  --xk-font-size-xl: 24px;
  --xk-font-size-2xl: 32px;
  --xk-line-height-tight: 1.3;
  --xk-line-height-normal: 1.65;
  --xk-line-height-relaxed: 1.8;
  --xk-font-weight-medium: 500;
  --xk-font-weight-semibold: 600;
  --xk-font-weight-bold: 700;

  --xk-control-height: 44px;
  --xk-container-width: 1280px;
  --xk-sticky-offset: 88px;
  --xk-duration-fast: 140ms;
  --xk-duration-normal: 220ms;
  --xk-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Compatibility aliases retained while legacy markup is consolidated. */
  --xk-color-bg: var(--xk-color-background);
  --xk-color-bg-panel: var(--xk-color-surface);
  --xk-color-bg-panel-strong: var(--xk-color-surface);
  --xk-color-text-muted: var(--xk-color-muted);
  --xk-color-primary-bg: var(--xk-color-primary-soft);
  --xk-color-primary-dark: var(--xk-color-primary-hover);
  --xk-color-primary-light: var(--xk-color-primary);
  --xk-color-secondary: var(--xk-color-success);
  --xk-color-secondary-light: var(--xk-color-success);
  --xk-color-secondary-dark: var(--xk-color-success);
  --xk-color-accent: var(--xk-color-primary);
  --xk-color-warning-bg: var(--xk-color-warning-soft);
  --xk-color-danger-bg: var(--xk-color-danger-soft);
  --xk-color-success-bg: var(--xk-color-success-soft);
  --xk-font-size-base: var(--xk-font-size-md);
  --xk-font-size-3xl: var(--xk-font-size-2xl);
  --xk-font-size-4xl: 38px;
  --xk-space-1: var(--xk-space-xs);
  --xk-space-2: var(--xk-space-sm);
  --xk-space-3: 12px;
  --xk-space-4: var(--xk-space-md);
  --xk-space-5: 20px;
  --xk-space-6: var(--xk-space-lg);
  --xk-space-8: var(--xk-space-xl);
  --xk-space-10: 40px;
  --xk-space-12: var(--xk-space-2xl);
  --xk-space-16: 64px;
  --xk-radius-xl: var(--xk-radius-lg);
  --xk-radius-2xl: var(--xk-radius-lg);
  --xk-shadow-lg: var(--xk-shadow-md);
  --xk-shadow-xl: var(--xk-shadow-md);
  --xk-shadow-soft: var(--xk-shadow-sm);
}

:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console),
:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *,
:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *::before,
:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *::after {
  box-sizing: border-box;
}

:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) {
  color: var(--xk-color-text);
  font-family: inherit;
  font-size: var(--xk-font-size-md);
  line-height: var(--xk-line-height-normal);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) :focus-visible,
:where(.xk-modal-overlay, .xk-toast-container) :focus-visible {
  outline: 2px solid var(--xk-color-primary);
  outline-offset: 2px;
  box-shadow: var(--xk-shadow-focus);
}

:where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) [hidden] {
  display: none !important;
}

.xk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes xk-spin {
  to { transform: rotate(360deg); }
}

@keyframes xk-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  :where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *,
  :where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *::before,
  :where(#xk-rehab-scale-library, .xk-rskb-page-shell, .xk-rskb-admin-console) *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}