/* ==========================================================================
   SenPro reskin — base theme layer
   Token values live in senpro-tokens.css (generated from
   design/design-system/tokens.json), which base.html loads first; dark mode
   switches with <html data-theme="dark"> (see static_files/js/reskin.js).
   This file holds only the white-label override and the base element styles
   that sit on top of Bootstrap and css-v2/main.css.
   ========================================================================== */

:root {
  color-scheme: light;
  /* Text on warning fills: ink per the design system (8:1). Ink turns light
     in dark mode, so dark mode uses surface-inverse, which stays dark and
     isn't touched by white-label. Candidate for tokens.json. */
  --on-warning: var(--ink);
}
html[data-theme="dark"] {
  --on-warning: var(--surface-inverse);
}

/* White-label: base.html sets --brand-accent (the organisation's colour) and
   --brand-accent-on (white or ink, whichever contrasts more) on <html> when
   custom branding is enabled. The organisation's colour is kept in both
   themes rather than swapped for the design system's lighter dark brand. */
html[style*="--brand-accent"] {
  --brand: var(--brand-accent);
  --on-brand: var(--brand-accent-on, #ffffff);
  --brand-hover: color-mix(in srgb, var(--brand-accent) 84%, #000);
  --brand-pressed: color-mix(in srgb, var(--brand-accent) 72%, #000);
  --brand-soft: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-card));
  --on-brand-soft: color-mix(in srgb, var(--brand-accent) 70%, var(--ink));
}
html[style*="--brand-accent"][data-theme="dark"] {
  --brand-hover: color-mix(in srgb, var(--brand-accent) 84%, #fff);
  --brand-pressed: color-mix(in srgb, var(--brand-accent) 72%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand-accent) 22%, var(--surface-card));
  --on-brand-soft: color-mix(in srgb, var(--brand-accent) 55%, var(--ink));
}

/* --------------------------------------------------------------------------
   Base typography and surfaces (overrides Bootstrap + css-v2/main.css)
   -------------------------------------------------------------------------- */

html {
  background: var(--surface-page);
}

body,
body p,
body .btn,
body input,
body button,
body select,
body textarea {
  font-family: var(--font-sans);
}

body {
  background: var(--surface-page);
  color: var(--ink);
  font: var(--text-body);
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body p {
  font: var(--text-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1, .h1 { font: var(--text-page-title); letter-spacing: var(--text-page-title-tracking); }
h2, .h2 { font: var(--text-modal-title); letter-spacing: var(--text-modal-title-tracking); }
h3, .h3 { font: var(--text-section-title); letter-spacing: var(--text-section-title-tracking); }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 13px; }


a {
  color: var(--brand);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--brand-hover);
  text-decoration: none;
}

hr {
  border-top: 1px solid var(--divider);
}

::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}

small, .small {
  font: var(--text-caption);
}

.text-muted { color: var(--ink-muted) !important; }
.text-dark { color: var(--ink) !important; }
.text-black { color: var(--ink) !important; }
.text-gold, .text-accent { color: var(--brand) !important; }
.text-success { color: var(--on-success-soft) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--on-warning-soft) !important; }

.bg-white { background-color: var(--surface-card) !important; }
.bg-light { background-color: var(--surface-subtle) !important; }
.bg-dark { background-color: var(--surface-inverse) !important; }
.bg-gold, .bg-accent { background-color: var(--brand) !important; color: var(--on-brand); }

.border, .border-top, .border-bottom, .border-left, .border-right {
  border-color: var(--divider) !important;
}
.border-secondary { border-color: var(--divider) !important; }
.border-dark { border-color: var(--border) !important; }

/* Selection / focus */
::selection {
  background: var(--brand-soft);
  color: var(--ink);
}
/* Same look as --shadow-focus (2px gap, 2px ring), but as an outline so
   components with their own box-shadow keep a visible focus ring. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}