/*
 * KT3M unified light design tokens.
 * This is the single colour, type, spacing and elevation source for every UI.
 */
:root {
  color-scheme: light;
  --kt2-font: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --kt2-page: #e6ebf2;
  --kt2-shell: #ffffff;
  --kt2-surface: #ffffff;
  --kt2-surface-raised: #ffffff;
  --kt2-surface-soft: #f1f5f9;
  --kt2-surface-strong: #eaf0f7;
  --kt2-field: #f8fafc;
  --kt2-field-hover: #ffffff;
  --kt2-border: #e5eaf2;
  --kt2-border-strong: #d6deea;

  --kt2-text: #10213a;
  --kt2-text-secondary: #52657c;
  --kt2-text-muted: #64748b;
  --kt2-text-subtle: #8493a7;
  --kt2-text-inverse: #ffffff;

  --kt2-primary: #355cf6;
  --kt2-primary-hover: #1f57dc;
  --kt2-primary-pressed: #1f57dc;
  --kt2-primary-soft: #eef1ff;
  --kt2-primary-soft-strong: #dfe5ff;
  --kt2-primary-border: #c9d2ff;

  --kt2-success: #19a974;
  --kt2-success-soft: #e8f7f0;
  --kt2-warning: #f59e0b;
  --kt2-warning-soft: #fff6e6;
  --kt2-danger: #ef476f;
  --kt2-danger-soft: #fff0f4;
  --kt2-info: #2596e8;
  --kt2-info-soft: #eaf6ff;
  --kt2-purple: #8b5cf6;
  --kt2-purple-soft: #f1ecff;

  --kt2-focus: 0 0 0 3px rgba(79, 107, 255, 0.2);
  --kt2-shadow-xs: 0 1px 2px rgba(16, 33, 58, 0.04);
  --kt2-shadow-sm: 0 4px 14px rgba(16, 33, 58, 0.055);
  --kt2-shadow-md: 0 12px 30px rgba(16, 33, 58, 0.085);
  --kt2-shadow-lg: 0 26px 70px rgba(16, 33, 58, 0.15);

  --kt2-radius-xs: 8px;
  --kt2-radius-sm: 10px;
  --kt2-radius-md: 12px;
  --kt2-radius-lg: 16px;
  --kt2-radius-xl: 20px;
  --kt2-radius-pill: 999px;

  --kt2-space-1: 4px;
  --kt2-space-2: 8px;
  --kt2-space-3: 12px;
  --kt2-space-4: 16px;
  --kt2-space-5: 20px;
  --kt2-space-6: 24px;
  --kt2-space-8: 32px;
  --kt2-space-10: 40px;

  --kt2-sidebar-width: 250px;
  --kt2-header-height: 72px;
  --kt2-content-max: 1680px;

  /* Compatibility bridge for templates that already use semantic KT3M vars. */
  --kt-page: var(--kt2-page);
  --kt-surface: var(--kt2-surface);
  --kt-surface-soft: var(--kt2-surface-soft);
  --kt-field: var(--kt2-field);
  --kt-border: var(--kt2-border);
  --kt-text: var(--kt2-text);
  --kt-text-soft: var(--kt2-text-muted);
  --kt-primary: var(--kt2-primary);
  --kt-primary-soft: var(--kt2-primary-soft);
}

html,
body.kt3m-ui-v2 {
  font-family: var(--kt2-font);
}

html[data-kt3m-theme="light"],
html[data-kt3m-theme="light"] body.kt3m-ui-v2 {
  background: var(--kt2-page) !important;
}

body.kt3m-ui-v2 {
  color: var(--kt2-text);
  background: var(--kt2-page) !important;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.kt3m-ui-v2 *,
body.kt3m-ui-v2 *::before,
body.kt3m-ui-v2 *::after {
  box-sizing: border-box;
}

body.kt3m-ui-v2 :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  color: var(--kt2-text);
  font-family: var(--kt2-font);
  letter-spacing: -0.022em;
}

body.kt3m-ui-v2 h1 {
  font-size: clamp(30px, 2.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
}

body.kt3m-ui-v2 h2 {
  font-size: clamp(23px, 1.65vw, 28px);
  font-weight: 750;
  line-height: 1.2;
}

body.kt3m-ui-v2 h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

body.kt3m-ui-v2 h4,
body.kt3m-ui-v2 h5 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

body.kt3m-ui-v2 p,
body.kt3m-ui-v2 li,
body.kt3m-ui-v2 td {
  font-size: max(14px, 0.875rem);
}

body.kt3m-ui-v2 small,
body.kt3m-ui-v2 .small {
  font-size: 12px;
  line-height: 1.45;
}

body.kt3m-ui-v2 :is(.text-muted, .text-secondary) {
  color: var(--kt2-text-muted) !important;
}

body.kt3m-ui-v2 a {
  color: var(--kt2-primary);
  text-underline-offset: 3px;
}

body.kt3m-ui-v2 :focus-visible {
  outline: 2px solid var(--kt2-primary) !important;
  outline-offset: 2px !important;
}

body.kt3m-ui-v2 ::selection {
  color: var(--kt2-text);
  background: var(--kt2-primary-soft-strong);
}

body.kt3m-ui-v2 ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body.kt3m-ui-v2 ::-webkit-scrollbar-track {
  background: transparent;
}

body.kt3m-ui-v2 ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--kt2-radius-pill);
  background: color-mix(in srgb, var(--kt2-text-subtle) 48%, transparent);
  background-clip: padding-box;
}

body.kt3m-ui-v2 ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--kt2-text-muted) 65%, transparent);
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  body.kt3m-ui-v2 *,
  body.kt3m-ui-v2 *::before,
  body.kt3m-ui-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}