/*
 * Terracotta: earth-tone theme for Bootstrap 5.3 (CDN build, no Sass).
 *
 * Load after bootstrap.min.css. Bootstrap 5.3 reads most colors from
 * --bs-* custom properties, so overriding them on :root re-themes utilities
 * (text-bg-*, bg-*, text-*, alerts, links). Buttons, form checks, focus rings
 * and table variants have their colors compiled into component variables, so
 * those are overridden per component below using Bootstrap's own variable
 * names. Light theme only.
 */

:root {
  /* Theme colors */
  --bs-primary: #9c4221;            /* terracotta */
  --bs-primary-rgb: 156, 66, 33;
  --bs-secondary: #7a6a58;          /* warm taupe */
  --bs-secondary-rgb: 122, 106, 88;
  --bs-success: #5a7a3a;            /* olive */
  --bs-success-rgb: 90, 122, 58;
  --bs-info: #4f7c82;               /* slate teal */
  --bs-info-rgb: 79, 124, 130;
  --bs-warning: #d4a017;            /* ochre */
  --bs-warning-rgb: 212, 160, 23;
  --bs-danger: #a8322d;             /* brick */
  --bs-danger-rgb: 168, 50, 45;
  --bs-light: #f6f2ec;              /* parchment canvas (public pages use bg-light) */
  --bs-light-rgb: 246, 242, 236;
  --bs-dark: #3b2f26;               /* umber */
  --bs-dark-rgb: 59, 47, 38;

  /* Text emphasis / subtle backgrounds / subtle borders (alerts, badges) */
  --bs-primary-text-emphasis: #4a1f10;
  --bs-primary-bg-subtle: #f5e1d8;
  --bs-primary-border-subtle: #e6bba9;
  --bs-secondary-text-emphasis: #3d352c;
  --bs-secondary-bg-subtle: #eee8e0;
  --bs-secondary-border-subtle: #d9cfc2;
  --bs-success-text-emphasis: #2f4220;
  --bs-success-bg-subtle: #e6eedc;
  --bs-success-border-subtle: #c8d8b5;
  --bs-info-text-emphasis: #284044;
  --bs-info-bg-subtle: #dfecee;
  --bs-info-border-subtle: #b8d3d6;
  --bs-warning-text-emphasis: #6b5008;
  --bs-warning-bg-subtle: #faf0d2;
  --bs-warning-border-subtle: #f0dca0;
  --bs-danger-text-emphasis: #5c1b18;
  --bs-danger-bg-subtle: #f6dfdc;
  --bs-danger-border-subtle: #e8b7b3;
  --bs-light-text-emphasis: #5a4c3f;
  --bs-light-bg-subtle: #fbf8f3;
  --bs-light-border-subtle: #ece3d6;
  --bs-dark-text-emphasis: #3b2f26;
  --bs-dark-bg-subtle: #d9cfc2;
  --bs-dark-border-subtle: #b5a796;

  /* Body, muted text, borders, links */
  --bs-body-color: #3b2f26;
  --bs-body-color-rgb: 59, 47, 38;
  /* --bs-body-bg is the *surface* color: Bootstrap paints cards, inputs,
     tables and dropdowns with it. Keep it white and give the page canvas
     its own darker tone (body rule below) so cards stand out. */
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #241b14;
  --bs-emphasis-color-rgb: 36, 27, 20;
  --bs-secondary-color: rgba(59, 47, 38, 0.72);
  --bs-secondary-color-rgb: 59, 47, 38;
  --bs-secondary-bg: #eee8e0;
  --bs-secondary-bg-rgb: 238, 232, 224;
  --bs-tertiary-color: rgba(59, 47, 38, 0.5);
  --bs-tertiary-bg: #f5efe6;
  --bs-tertiary-bg-rgb: 245, 239, 230;
  --bs-heading-color: #3b2f26;
  --bs-link-color: #9c4221;
  --bs-link-color-rgb: 156, 66, 33;
  --bs-link-hover-color: #7f3519;
  --bs-link-hover-color-rgb: 127, 53, 25;
  --bs-border-color: #d9cab5;
  --bs-border-color-translucent: rgba(59, 47, 38, 0.15);
  --bs-focus-ring-color: rgba(156, 66, 33, 0.25);
  --bs-code-color: #a8322d;
}

/* Page canvas: darker than the white card/input surfaces. */
body {
  background-color: #f6f2ec;
}

/* Buttons: solid */
.btn-primary {
  --bs-btn-bg: #9c4221;
  --bs-btn-border-color: #9c4221;
  --bs-btn-hover-bg: #84381c;
  --bs-btn-hover-border-color: #7f3519;
  --bs-btn-focus-shadow-rgb: 171, 94, 66;
  --bs-btn-active-bg: #7d351a;
  --bs-btn-active-border-color: #753219;
  --bs-btn-disabled-bg: #9c4221;
  --bs-btn-disabled-border-color: #9c4221;
}
.btn-secondary {
  --bs-btn-bg: #7a6a58;
  --bs-btn-border-color: #7a6a58;
  --bs-btn-hover-bg: #685a4b;
  --bs-btn-hover-border-color: #625546;
  --bs-btn-focus-shadow-rgb: 142, 128, 113;
  --bs-btn-active-bg: #625546;
  --bs-btn-active-border-color: #5c5042;
  --bs-btn-disabled-bg: #7a6a58;
  --bs-btn-disabled-border-color: #7a6a58;
}
.btn-success {
  --bs-btn-bg: #5a7a3a;
  --bs-btn-border-color: #5a7a3a;
  --bs-btn-hover-bg: #4d6831;
  --bs-btn-hover-border-color: #48622e;
  --bs-btn-focus-shadow-rgb: 115, 142, 88;
  --bs-btn-active-bg: #48622e;
  --bs-btn-active-border-color: #445c2c;
  --bs-btn-disabled-bg: #5a7a3a;
  --bs-btn-disabled-border-color: #5a7a3a;
}
.btn-danger {
  --bs-btn-bg: #a8322d;
  --bs-btn-border-color: #a8322d;
  --bs-btn-hover-bg: #8f2b26;
  --bs-btn-hover-border-color: #862824;
  --bs-btn-focus-shadow-rgb: 181, 81, 77;
  --bs-btn-active-bg: #862824;
  --bs-btn-active-border-color: #7e2622;
  --bs-btn-disabled-bg: #a8322d;
  --bs-btn-disabled-border-color: #a8322d;
}
.btn-warning {
  --bs-btn-color: #3b2f26;
  --bs-btn-bg: #d4a017;
  --bs-btn-border-color: #d4a017;
  --bs-btn-hover-color: #3b2f26;
  --bs-btn-hover-bg: #daae3a;
  --bs-btn-hover-border-color: #d8aa2e;
  --bs-btn-focus-shadow-rgb: 189, 143, 26;
  --bs-btn-active-color: #3b2f26;
  --bs-btn-active-bg: #ddb345;
  --bs-btn-active-border-color: #d8aa2e;
  --bs-btn-disabled-color: #3b2f26;
  --bs-btn-disabled-bg: #d4a017;
  --bs-btn-disabled-border-color: #d4a017;
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4f7c82;
  --bs-btn-border-color: #4f7c82;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #436a6f;
  --bs-btn-hover-border-color: #3f6368;
  --bs-btn-focus-shadow-rgb: 105, 144, 149;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3f6368;
  --bs-btn-active-border-color: #3b5d62;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4f7c82;
  --bs-btn-disabled-border-color: #4f7c82;
}

/* Buttons: outline */
.btn-outline-primary {
  --bs-btn-color: #9c4221;
  --bs-btn-border-color: #9c4221;
  --bs-btn-hover-bg: #9c4221;
  --bs-btn-hover-border-color: #9c4221;
  --bs-btn-focus-shadow-rgb: 156, 66, 33;
  --bs-btn-active-bg: #9c4221;
  --bs-btn-active-border-color: #9c4221;
  --bs-btn-disabled-color: #9c4221;
  --bs-btn-disabled-border-color: #9c4221;
}
.btn-outline-secondary {
  --bs-btn-color: #7a6a58;
  --bs-btn-border-color: #b5a796;
  --bs-btn-hover-bg: #7a6a58;
  --bs-btn-hover-border-color: #7a6a58;
  --bs-btn-focus-shadow-rgb: 122, 106, 88;
  --bs-btn-active-bg: #7a6a58;
  --bs-btn-active-border-color: #7a6a58;
  --bs-btn-disabled-color: #7a6a58;
  --bs-btn-disabled-border-color: #b5a796;
}
.btn-outline-success {
  --bs-btn-color: #5a7a3a;
  --bs-btn-border-color: #5a7a3a;
  --bs-btn-hover-bg: #5a7a3a;
  --bs-btn-hover-border-color: #5a7a3a;
  --bs-btn-focus-shadow-rgb: 90, 122, 58;
  --bs-btn-active-bg: #5a7a3a;
  --bs-btn-active-border-color: #5a7a3a;
  --bs-btn-disabled-color: #5a7a3a;
  --bs-btn-disabled-border-color: #5a7a3a;
}
.btn-outline-danger {
  --bs-btn-color: #a8322d;
  --bs-btn-border-color: #a8322d;
  --bs-btn-hover-bg: #a8322d;
  --bs-btn-hover-border-color: #a8322d;
  --bs-btn-focus-shadow-rgb: 168, 50, 45;
  --bs-btn-active-bg: #a8322d;
  --bs-btn-active-border-color: #a8322d;
  --bs-btn-disabled-color: #a8322d;
  --bs-btn-disabled-border-color: #a8322d;
}
.btn-outline-warning {
  --bs-btn-color: #8a6610;
  --bs-btn-border-color: #d4a017;
  --bs-btn-hover-color: #3b2f26;
  --bs-btn-hover-bg: #d4a017;
  --bs-btn-hover-border-color: #d4a017;
  --bs-btn-focus-shadow-rgb: 212, 160, 23;
  --bs-btn-active-color: #3b2f26;
  --bs-btn-active-bg: #d4a017;
  --bs-btn-active-border-color: #d4a017;
  --bs-btn-disabled-color: #8a6610;
  --bs-btn-disabled-border-color: #d4a017;
}

/* text-bg-info: Bootstrap pairs info with black text; the darker slate
   needs white for contrast. */
.text-bg-info {
  color: #fff !important;
}

/* Form controls: focus ring and checked state are compiled to blue. */
.form-control:focus,
.form-select:focus {
  border-color: #cf9a85;
  box-shadow: 0 0 0 0.25rem rgba(156, 66, 33, 0.25);
}
.form-check-input:focus {
  border-color: #cf9a85;
  box-shadow: 0 0 0 0.25rem rgba(156, 66, 33, 0.25);
}
.form-check-input:checked {
  background-color: #9c4221;
  border-color: #9c4221;
}

/* Table variants */
.table {
  --bs-table-bg: transparent; /* inherit the card or canvas behind it */
  --bs-table-color: #3b2f26;
  --bs-table-striped-bg: rgba(59, 47, 38, 0.04);
  --bs-table-hover-bg: rgba(156, 66, 33, 0.06);
}
.table-light {
  --bs-table-color: #3b2f26;
  --bs-table-bg: #f5efe6;
  --bs-table-border-color: #d9cab5;
  --bs-table-striped-bg: #ece5da;
  --bs-table-hover-bg: #e8dfd2;
}
.table-warning {
  --bs-table-color: #3b2f26;
  --bs-table-bg: #faf0d2;
  --bs-table-border-color: #f0dca0;
  --bs-table-striped-bg: #f3e7c4;
  --bs-table-hover-bg: #efe2bb;
}

/* Cards and progress */
.card {
  --bs-card-bg: #fff;
  --bs-card-border-color: #d9cab5;
  --bs-card-cap-bg: #f7f1e8;
  box-shadow: 0 1px 2px rgba(59, 47, 38, 0.06), 0 2px 6px rgba(59, 47, 38, 0.06);
}
.progress {
  --bs-progress-bg: #eee8e0;
  --bs-progress-bar-bg: #9c4221;
}

/* Navs and pagination */
.nav-pills {
  --bs-nav-pills-link-active-bg: #9c4221;
}
.nav-tabs {
  --bs-nav-tabs-border-color: #d9cab5;
  --bs-nav-tabs-link-hover-border-color: #eee8e0 #eee8e0 #d9cab5;
  --bs-nav-tabs-link-active-color: #3b2f26;
  --bs-nav-tabs-link-active-bg: #fff;
  --bs-nav-tabs-link-active-border-color: #d9cab5 #d9cab5 #fff;
}
.pagination {
  --bs-pagination-active-bg: #9c4221;
  --bs-pagination-active-border-color: #9c4221;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(156, 66, 33, 0.25);
}