/* SimplePM visual theme: "Slate & Teal" (docs/implementation-tracker.md Phase 9).
   Loaded after bootstrap.min.css. Overrides Bootstrap 5.3's root CSS custom
   properties (retints utility classes and any component that reads a root
   var, e.g. .text-bg-*, .bg-*, .text-*, .border-*, .alert-*) plus a handful
   of per-component custom properties that Bootstrap bakes as literal hex at
   build time and therefore does NOT inherit from the root vars above
   (.btn-*, .form-check-input:checked, .progress-bar). See the Phase 9
   Decisions Log entry for why each override exists. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../lib/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Primary: teal */
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-primary-text-emphasis: #0b4a45;
  --bs-primary-bg-subtle: #e6f5f3;
  --bs-primary-border-subtle: #a8d9d3;

  /* Secondary: slate */
  --bs-secondary: #475569;
  --bs-secondary-rgb: 71, 85, 105;
  --bs-secondary-text-emphasis: #1e293b;
  --bs-secondary-bg-subtle: #f1f5f9;
  --bs-secondary-border-subtle: #cbd5e1;

  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #14532d;
  --bs-success-bg-subtle: #dcfce7;
  --bs-success-border-subtle: #86efac;

  --bs-warning: #d97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: #78350f;
  --bs-warning-bg-subtle: #fef3c7;
  --bs-warning-border-subtle: #fcd34d;

  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #7f1d1d;
  --bs-danger-bg-subtle: #fee2e2;
  --bs-danger-border-subtle: #fca5a5;

  /* Repurposed as the app's "ink" tone - the dark navbar background
     (nav uses navbar-dark bg-dark, see _Layout.cshtml) and any .text-dark
     usage. Nothing else in the app uses .btn-dark/.border-dark today. */
  --bs-dark: #1e293b;
  --bs-dark-rgb: 30, 41, 59;
  --bs-dark-text-emphasis: #0f172a;
  --bs-dark-bg-subtle: #e2e8f0;
  --bs-dark-border-subtle: #94a3b8;

  --bs-body-bg: #f8fafc;
  --bs-body-color: #0f172a;
  --bs-emphasis-color: #0f172a;
  --bs-secondary-color: #475569;
  --bs-tertiary-bg: #f1f5f9;
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(30, 41, 59, 0.1);

  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115e59;
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));

  --bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-heading-font-family: "Space Grotesk", var(--bs-font-sans-serif);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
}

/* .btn-*, .form-check-input:checked and .progress-bar bake their colors as
   literal hex custom properties at Bootstrap's build time, so they don't
   pick up the --bs-primary/--bs-secondary/etc. overrides above on their
   own - each needs its own override here. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #115e59;
  --bs-btn-hover-border-color: #115e59;
  --bs-btn-active-bg: #0d5b54;
  --bs-btn-active-border-color: #0d5b54;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: #334155;
  --bs-btn-hover-border-color: #334155;
  --bs-btn-active-bg: #293548;
  --bs-btn-active-border-color: #293548;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: #128038;
  --bs-btn-hover-border-color: #128038;
  --bs-btn-active-bg: #0f6b2f;
  --bs-btn-active-border-color: #0f6b2f;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

/* Dark navbar (navbar-dark bg-dark in _Layout.cshtml): Bootstrap's own
   .navbar-dark rule already sets light/white text via rgba(255,255,255,*)
   custom properties, so no separate text-color override is needed here -
   only the background comes from --bs-dark above. */