/* Kenchez design tokens (Part 05c, A-122). The organisation's palette from the sample design (18 October 2026),
   with the contrast changes in the Part 05 Build file, 8.2. Layered over Bootstrap 5.3.3's own variables, so every
   Bootstrap component takes the palette. The design test reads the token values from this block. */
:root {
  --kz-slate: #1e293b;
  --kz-slate-2: #273449;
  --kz-slate-text: #cbd5e1;
  --kz-slate-label: #91a2b8;
  --kz-slate-line: rgba(255, 255, 255, .09);
  --kz-primary: #0f766e;
  --kz-primary-hover: #115e59;
  --kz-primary-soft: #e6f6f3;
  --kz-teal: #0d9488;
  --kz-accent: #f97316;
  --kz-accent-text: #c2410c;
  --kz-accent-soft: #fff1e8;
  --kz-page: #f6f7f9;
  --kz-card: #ffffff;
  --kz-head: #fafbfc;
  --kz-ink: #0f172a;
  --kz-ink-2: #334155;
  --kz-muted: #64748b;
  --kz-muted-on-page: #475569;
  --kz-border: #e4e7eb;
  --kz-row-line: #eef0f3;
  --kz-row-hover: #f8fbfa;
  --kz-success: #15803d;
  --kz-success-soft: #ecfdf3;
  --kz-warning: #b45309;
  --kz-warning-soft: #fffbeb;
  --kz-danger: #b91c1c;
  --kz-danger-soft: #fef2f2;
  --kz-info: #0369a1;
  --kz-info-soft: #f0f9ff;
  --kz-purple: #7e22ce;
  --kz-purple-soft: #f5effe;
  --kz-neutral: #475569;
  --kz-neutral-soft: #f1f5f9;
  --kz-radius: 12px;
  --kz-radius-sm: 8px;
  --kz-shadow: 0 2px 8px rgba(15, 23, 42, .05);
  --kz-sidebar-w: 248px;
  --kz-topbar-h: 64px;

  --bs-body-bg: var(--kz-page);
  --bs-body-color: var(--kz-ink);
  --bs-secondary-color: var(--kz-muted);
  --bs-border-color: var(--kz-border);
  --bs-primary: var(--kz-primary);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--kz-primary);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--kz-primary-hover);
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-border-radius: var(--kz-radius-sm);
  --bs-border-radius-lg: var(--kz-radius);
  --bs-font-sans-serif: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-focus-ring-color: rgba(13, 148, 136, .35);
}

/* Bootstrap compiles some colours into its component rules: re-point them at the tokens. */
.btn-primary {
  --bs-btn-bg: var(--kz-primary); --bs-btn-border-color: var(--kz-primary);
  --bs-btn-hover-bg: var(--kz-primary-hover); --bs-btn-hover-border-color: var(--kz-primary-hover);
  --bs-btn-active-bg: var(--kz-primary-hover); --bs-btn-active-border-color: var(--kz-primary-hover);
  --bs-btn-disabled-bg: var(--kz-primary); --bs-btn-disabled-border-color: var(--kz-primary);
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
}
.btn-outline-primary {
  --bs-btn-color: var(--kz-primary); --bs-btn-border-color: var(--kz-primary);
  --bs-btn-hover-bg: var(--kz-primary); --bs-btn-hover-border-color: var(--kz-primary);
  --bs-btn-active-bg: var(--kz-primary-hover); --bs-btn-focus-shadow-rgb: 13, 148, 136;
}
.btn-outline-secondary {
  --bs-btn-color: var(--kz-ink-2); --bs-btn-border-color: var(--kz-border); --bs-btn-bg: var(--kz-card);
  --bs-btn-hover-bg: #f8fafc; --bs-btn-hover-color: var(--kz-ink); --bs-btn-hover-border-color: #cbd5e1;
  --bs-btn-active-bg: #f1f5f9; --bs-btn-active-color: var(--kz-ink); --bs-btn-active-border-color: #cbd5e1;
}
.btn-outline-danger { --bs-btn-color: var(--kz-danger); --bs-btn-border-color: #f3c4c4; --bs-btn-hover-bg: var(--kz-danger);
  --bs-btn-hover-border-color: var(--kz-danger); }
.btn-success { --bs-btn-bg: var(--kz-success); --bs-btn-border-color: var(--kz-success); }
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--kz-radius-sm); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--kz-teal); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--kz-primary); border-color: var(--kz-primary); }
.page-link { --bs-pagination-color: var(--kz-primary); --bs-pagination-hover-color: var(--kz-primary-hover);
  --bs-pagination-active-bg: var(--kz-primary); --bs-pagination-active-border-color: var(--kz-primary); }
.alert-success { --bs-alert-color: var(--kz-success); --bs-alert-bg: var(--kz-success-soft); --bs-alert-border-color: #bbf0cf; }
.alert-warning { --bs-alert-color: var(--kz-warning); --bs-alert-bg: var(--kz-warning-soft); --bs-alert-border-color: #f8e3a6; }
.alert-danger { --bs-alert-color: var(--kz-danger); --bs-alert-bg: var(--kz-danger-soft); --bs-alert-border-color: #f6caca; }
.alert-info { --bs-alert-color: var(--kz-info); --bs-alert-bg: var(--kz-info-soft); --bs-alert-border-color: #c4e4f6; }
