/* Trip Sheet Central theme: design tokens and Bootstrap variable overrides.
   Loaded after bootstrap.min.css on every page that uses the shared chrome (extranet/chrome/header.php), so the
   marketing pages, the public auth pages and (from phase 2) the logged-in app all share one palette and one
   typeface. Bootstrap stays the primary CSS: everything here is a variable or a small, prefixed class, never a
   global element rule that would restyle app pages (no h1-h3, p, section or .btn resets).

   Font files: web-assets/css/fonts/barlow/ (barlow.css declares them). Until those are installed, the header
   falls back to the Google Fonts stylesheet for the same families. */

:root {
  /* brand tokens (the logo's blue and amber) */
  --tsc-ink: #0e1326;
  --tsc-muted: #4a5370;
  --tsc-rule: #d5dbea;
  --tsc-paper: #f5f7fc;
  --tsc-sheet: #ffffff;
  --tsc-blue: #213f9a;
  --tsc-blue-dark: #182f75;
  --tsc-blue-soft: #e7ecfa;
  --tsc-amber: #f2a900;
  --tsc-amber-ink: #2a1e00;
  --tsc-display: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --tsc-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --tsc-header-h: 76px;
  --tsc-gutter: max(1%, 0.75rem);   /* side margin shared by header, content and footer (the app uses 1%) */

  /* legacy brand tokens (the old teal), re-pointed so every rule still using them follows the new palette */
  --tsc-brand: var(--tsc-blue);
  --tsc-brand-dark: var(--tsc-blue-dark);
  --tsc-accent: var(--tsc-amber);

  /* Bootstrap 5.3 */
  --bs-primary: #213f9a;
  --bs-primary-rgb: 33, 63, 154;
  --bs-link-color: #213f9a;
  --bs-link-color-rgb: 33, 63, 154;
  --bs-link-hover-color: #182f75;
  --bs-link-hover-color-rgb: 24, 47, 117;
  --bs-body-font-family: var(--tsc-body);
  --bs-body-color: #0e1326;
  --bs-body-color-rgb: 14, 19, 38;
  --bs-border-color: #d5dbea;
  --bs-border-radius: 0.5rem;
  --bs-focus-ring-color: rgba(33, 63, 154, 0.25);
}

/* pages that use the shared chrome */
.tsc-site {
  background-color: var(--tsc-paper);
  color: var(--tsc-ink);
  font-family: var(--tsc-body);
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tsc-site > main,
.tsc-site > #page { flex: 1 0 auto; }

.tsc-site :focus-visible {
  outline: 3px solid var(--tsc-amber);
  outline-offset: 2px;
  border-radius: 4px;
}
/* form fields show their own blue focus border (below), not the amber keyboard ring */
.tsc-site input:focus-visible,
.tsc-site select:focus-visible,
.tsc-site textarea:focus-visible,
.tsc-site .input-group:focus-within {
  outline: none;
}

/* Bootstrap components, recolored through their own variables */
.btn-primary {
  --bs-btn-bg: var(--tsc-blue);
  --bs-btn-border-color: var(--tsc-blue);
  --bs-btn-hover-bg: var(--tsc-blue-dark);
  --bs-btn-hover-border-color: var(--tsc-blue-dark);
  --bs-btn-active-bg: #122560;
  --bs-btn-active-border-color: #122560;
  --bs-btn-disabled-bg: var(--tsc-blue);
  --bs-btn-disabled-border-color: var(--tsc-blue);
  --bs-btn-focus-shadow-rgb: 33, 63, 154;
}
.btn-outline-primary {
  --bs-btn-color: var(--tsc-blue);
  --bs-btn-border-color: var(--tsc-blue);
  --bs-btn-hover-bg: var(--tsc-blue);
  --bs-btn-hover-border-color: var(--tsc-blue);
  --bs-btn-active-bg: var(--tsc-blue);
  --bs-btn-active-border-color: var(--tsc-blue);
  --bs-btn-disabled-color: var(--tsc-blue);
  --bs-btn-disabled-border-color: var(--tsc-blue);
  --bs-btn-focus-shadow-rgb: 33, 63, 154;
}
.alert-primary {
  --bs-alert-color: #142a69;
  --bs-alert-bg: #e7ecfa;
  --bs-alert-border-color: #c5d0f2;
  --bs-alert-link-color: #0f2054;
}
.form-control:focus,
.form-select:focus {
  border-color: #8a9fdc;
  box-shadow: 0 0 0 0.25rem rgba(33, 63, 154, 0.2);
}
.form-check-input:checked {
  background-color: var(--tsc-blue);
  border-color: var(--tsc-blue);
}

/* opt-in condensed display type (never applied to bare headings) */
.tsc-display {
  font-family: var(--tsc-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}