:root {
  /* Core brand colours */
  --dki-black: #000000;
  --dki-red: #c9282d;
  --dki-blue: #1b417f;
  --dki-slate: #191919;
  --dki-grey-100: #f1f0f1;
  --dki-grey-500: #808080;
  --dki-white: #ffffff;

  /* UI tokens */
  --bg-page: var(--dki-grey-100);
  --bg-panel: var(--dki-white);
  --bg-panel-dark: var(--dki-slate);
  --text-primary: var(--dki-black);
  --text-secondary: #404040;
  --text-muted: var(--dki-grey-500);
  --text-on-dark: var(--dki-white);
  --border-light: #dddddd;
  --border-strong: #cfcfcf;

  --accent-primary: var(--dki-red);
  --accent-secondary: var(--dki-blue);
  --accent-hover: #a61f24;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.12);

  --font-body: "Roboto", Arial, sans-serif;
  --font-heading: "Roboto Condensed", "Roboto", Arial, sans-serif;
  --font-display: "Roboto", Arial, sans-serif;
}

/* Base */
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900; /* Roboto Black */
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

h2, .h2 { font-weight: 700; }
h3, .h3 { font-weight: 900; }
h4, .h4 { font-weight: 400; }
h5, .h5 { font-weight: 600; }

p, li, span, label, input, textarea, button {
  font-family: var(--font-body);
}

/* Cards / panels */
.card,
.dki-card,
.bslib-card,
.box {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.card-header,
.box-header {
  background: var(--dki-white);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Dark hero / drawer / banner sections */
.dki-dark-panel,
.dki-hero,
.dki-drawer-header,
.navbar {
  background: var(--bg-panel-dark);
  color: var(--text-on-dark);
}

.dki-dark-panel h1,
.dki-dark-panel h2,
.dki-dark-panel h3,
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--text-on-dark);
}

/* Buttons */
.btn,
button.btn {
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  transition: all 0.18s ease;
}

.btn-primary,
.btn-danger,
.dki-btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--dki-white);
}

.btn-primary:hover,
.btn-danger:hover,
.dki-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--dki-white);
}

.btn-secondary,
.dki-btn-secondary {
  background: var(--dki-black);
  border-color: var(--dki-black);
  color: var(--dki-white);
}

.btn-outline-primary,
.dki-btn-outline {
  background: transparent;
  border: 1px solid var(--dki-black);
  color: var(--dki-black);
}

.btn-outline-primary:hover,
.dki-btn-outline:hover {
  background: var(--dki-black);
  color: var(--dki-white);
}

/* Links and accents */
a {
  color: var(--accent-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* Inputs */
.form-control,
.selectize-input,
textarea,
input[type="text"],
input[type="search"] {
  background: var(--dki-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  box-shadow: none;
}

.form-control:focus,
.selectize-input.focus,
textarea:focus,
input:focus {
  border-color: var(--dki-black);
  box-shadow: 0 0 0 3px rgba(201, 40, 45, 0.12);
  outline: none;
}

/* Tables */
.table,
.dataTable {
  background: var(--dki-white);
  color: var(--text-primary);
}

.table thead th,
.dataTables_wrapper table.dataTable thead th {
  background: var(--dki-black);
  color: var(--dki-white);
  border-bottom: none;
  font-family: var(--font-heading);
  font-weight: 700;
}

.table tbody tr:nth-child(even),
.dataTables_wrapper table.dataTable tbody tr:nth-child(even) {
  background: #fafafa;
}

.table tbody tr:hover,
.dataTables_wrapper table.dataTable tbody tr:hover {
  background: rgba(201, 40, 45, 0.05);
}

/* Badges / chips */
.badge,
.dki-chip {
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
}

.badge-danger,
.dki-chip-red {
  background: var(--dki-red);
  color: var(--dki-white);
}

.badge-dark,
.dki-chip-black {
  background: var(--dki-black);
  color: var(--dki-white);
}

.badge-light,
.dki-chip-light {
  background: var(--dki-grey-100);
  color: var(--dki-black);
}

/* Minimal layout spacing */
.section,
.dki-section {
  padding: 1.25rem;
}

.section-title,
.dki-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Avoid clutter */
hr {
  border: 0;
  border-top: 1px solid var(--border-light);
}