/*!
 * Climbing Workouts theme  |  css/climbingworkouts.css
 * A thin skin over Bootstrap 5.3. Load it AFTER bootstrap.min.css.
 * Bootstrap class names keep their meaning: primary is our red,
 * secondary is steel, and so on. Only a few extra backgrounds and
 * fonts are added. Style guide: /brand.html
 *
 *   1. Theme tokens   2. Component skins   3. Extra backgrounds
 *   4. Extra fonts    5. Utilities         6. Legacy helpers
 */

@import url('https://fonts.googleapis.com/css?family=Questrial|Roboto:300,400');

/* 1. THEME TOKENS ----------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: 'Questrial', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: #212121;
  --bs-body-color-rgb: 33, 33, 33;

  /* Theme colors: same Bootstrap names, our palette */
  --bs-primary: #dc3545;   --bs-primary-rgb: 220, 53, 69;     /* brand red */
  --bs-secondary: #607d8b; --bs-secondary-rgb: 96, 125, 139;  /* steel */
  --bs-success: #28a745;   --bs-success-rgb: 40, 167, 69;     /* go green */
  --bs-info: #009688;      --bs-info-rgb: 0, 150, 136;        /* teal */
  --bs-warning: #ffc107;   --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #b71c1c;    --bs-danger-rgb: 183, 28, 28;      /* deep red, for errors */
  --bs-light: #f5f5f5;     --bs-light-rgb: 245, 245, 245;
  --bs-dark: #212121;      --bs-dark-rgb: 33, 33, 33;

  --bs-primary-text-emphasis: #58151c;   --bs-primary-bg-subtle: #f8d7da;   --bs-primary-border-subtle: #f1aeb5;
  --bs-secondary-text-emphasis: #263238; --bs-secondary-bg-subtle: #dfe5e8; --bs-secondary-border-subtle: #bfcbd1;
  --bs-success-text-emphasis: #10431c;   --bs-success-bg-subtle: #d4edda;   --bs-success-border-subtle: #a9dcb5;

  --bs-link-color: #dc3545;       --bs-link-color-rgb: 220, 53, 69;
  --bs-link-hover-color: #b71c1c; --bs-link-hover-color-rgb: 183, 28, 28;

  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;

  /* Brand extras */
  --cw-ink: #212121;
  --cw-ink-soft: #424242;
  --cw-paper: #f5f5f5;
  --cw-steel: #607d8b;
  --cw-mist: #cfd8dc;
  --cw-red: var(--bs-primary);
  --cw-red-dark: #b71c1c;
  --cw-green: var(--bs-success);
}

html { scroll-behavior: smooth; }
::selection { background: var(--bs-primary); color: #fff; }

/* 2. COMPONENT SKINS -------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: #dc3545; --bs-btn-border-color: #dc3545;
  --bs-btn-hover-bg: #b71c1c; --bs-btn-hover-border-color: #b71c1c;
  --bs-btn-active-bg: #a01818; --bs-btn-active-border-color: #a01818;
  --bs-btn-disabled-bg: #dc3545; --bs-btn-disabled-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
}
.btn-outline-primary {
  --bs-btn-color: #dc3545; --bs-btn-border-color: #dc3545;
  --bs-btn-hover-bg: #dc3545; --bs-btn-hover-border-color: #dc3545;
  --bs-btn-active-bg: #dc3545; --bs-btn-active-border-color: #dc3545;
  --bs-btn-disabled-color: #dc3545; --bs-btn-disabled-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
}
.btn-secondary {
  --bs-btn-bg: #607d8b; --bs-btn-border-color: #607d8b;
  --bs-btn-hover-bg: #4b636f; --bs-btn-hover-border-color: #4b636f;
  --bs-btn-active-bg: #435863; --bs-btn-active-border-color: #435863;
  --bs-btn-disabled-bg: #607d8b; --bs-btn-disabled-border-color: #607d8b;
}
.btn-outline-secondary {
  --bs-btn-color: #607d8b; --bs-btn-border-color: #607d8b;
  --bs-btn-hover-bg: #607d8b; --bs-btn-hover-border-color: #607d8b;
  --bs-btn-active-bg: #607d8b; --bs-btn-active-border-color: #607d8b;
  --bs-btn-disabled-color: #607d8b; --bs-btn-disabled-border-color: #607d8b;
}
.btn-success {
  --bs-btn-bg: #28a745; --bs-btn-border-color: #28a745;
  --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #218838;
  --bs-btn-active-bg: #1e7e34; --bs-btn-active-border-color: #1e7e34;
  --bs-btn-disabled-bg: #28a745; --bs-btn-disabled-border-color: #28a745;
}
.btn-danger {
  --bs-btn-bg: #b71c1c; --bs-btn-border-color: #b71c1c;
  --bs-btn-hover-bg: #9a1717; --bs-btn-hover-border-color: #9a1717;
  --bs-btn-active-bg: #8a1414; --bs-btn-active-border-color: #8a1414;
}
.btn-dark { --bs-btn-bg: #212121; --bs-btn-border-color: #212121; --bs-btn-hover-bg: #424242; --bs-btn-hover-border-color: #424242; }

.navbar-brand img { max-height: 44px; width: auto; }
.card { --bs-card-border-color: #e3e6e8; }
.form-control:focus, .form-select:focus { border-color: #ef9a9a; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: #ef9a9a; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav-tabs .nav-link { color: var(--bs-body-color); }
.nav-tabs .nav-link.active { border-top: 3px solid var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.progress { --bs-progress-bar-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-primary); --bs-pagination-hover-color: var(--cw-red-dark); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }
.blockquote { border-left: 4px solid var(--bs-primary); padding-left: 1rem; }
.blockquote-footer { color: var(--bs-secondary); }
.table > thead.table-dark > * > * { background-color: var(--cw-ink); }
footer.bg-primary a, footer.bg-dark a { color: #fff; }

/* 3. EXTRA BACKGROUNDS (same pattern as Bootstrap's bg-*) ------------- */
.bg-ink        { background-color: var(--cw-ink) !important;      color: #fff; }
.bg-ink-soft   { background-color: var(--cw-ink-soft) !important; color: #fff; }
.bg-steel      { background-color: var(--cw-steel) !important;    color: #fff; }
.bg-mist       { background-color: var(--cw-mist) !important;     color: var(--cw-ink); }
.bg-paper      { background-color: var(--cw-paper) !important;    color: var(--cw-ink); }
.bg-primary-dark { background-color: var(--cw-red-dark) !important; color: #fff; }
.text-ink      { color: var(--cw-ink) !important; }
.text-steel    { color: var(--cw-steel) !important; }
.text-primary-dark { color: var(--cw-red-dark) !important; }

/* 4. EXTRA FONTS ------------------------------------------------------ */
.font-brand { font-family: 'Questrial', sans-serif !important; }
.font-alt   { font-family: 'Roboto', sans-serif !important; font-weight: 300; }

/* 5. UTILITIES -------------------------------------------------------- */
.bookfx { box-shadow: 10px 8px 13px -6px rgba(0, 0, 0, .75); }
@media print { .noprint, video { display: none !important; } }