/**
 * L0 Foundations — density, theme defaults, CRM token overrides for Perfex.
 * After tokens + fonts. Uses --kodex-* / --kds-* only.
 */

:root,
html.kodex-ds,
html[data-theme='light'],
html[data-theme='dark'] {
  /* BD-04: sidebar active = primary blue, never orange CTA */
  --kodex-crm-sidebar-active: var(--kodex-action-primary);

  /* Density contract (BD-03) */
  --kpf-page-gutter: var(--kodex-space-4, 16px);
  --kpf-panel-padding: var(--kodex-space-4, 16px);
  --kpf-form-field-gap: var(--kds-stack-gap-md, var(--kodex-space-3, 12px));
  --kpf-control-height: var(--kds-btn-height-md, 36px);
  --kpf-control-height-sm: var(--kds-btn-height-sm, 32px);
}

html.kodex-ds,
html[data-theme='light'],
html[data-theme='dark'] {
  font-family: var(--kodex-font-family-sans, 'Satoshi', system-ui, sans-serif);
  font-size: max(14px, var(--kodex-font-size-body, 14px));
  color: var(--kodex-text-primary);
  background: var(--kodex-bg-canvas);
}

body.admin,
body.app,
body.customers,
body.login_admin {
  font-family: var(--kodex-font-family-sans, 'Satoshi', system-ui, sans-serif);
  font-size: max(14px, var(--kodex-font-size-body, 14px));
  color: var(--kodex-text-primary);
}

/* Page content gutters */
body.admin #wrapper .content,
body.app #wrapper .content {
  padding-left: var(--kpf-page-gutter);
  padding-right: var(--kpf-page-gutter);
}

.panel_s .panel-body,
.panel-body {
  padding: var(--kpf-panel-padding);
}

.form-group {
  margin-bottom: var(--kpf-form-field-gap);
}

/* Focus ring — accessibility principle */
:focus-visible {
  outline: 2px solid var(--kodex-focus-ring, var(--kodex-action-primary));
  outline-offset: var(--kodex-focus-ring-offset, 2px);
}

/* Login: do not force dark via body; html[data-theme] from FOUC script wins */
body.login_admin.kds-insp-login-page {
  background: var(--kodex-bg-canvas);
}