/* Theme: every colour token, light and dark, in one place (spec/design.md).

   Loaded after bootstrap.min.css and before kunder.css. Bootstrap 5.3 reads
   most components from --bs-* custom properties at runtime; where it
   compiles a colour in (buttons, switches, focus rings), it is overridden
   at the bottom with tokens. :root is light; [data-bs-theme="dark"] (set by
   assets/js/theme.js from the system setting) redefines what changes.
   kunder.css uses only var(--theme-*) and var(--bs-*). Contrast is noted at
   each text colour (WCAG AA: 4.5:1 text, 3:1 large text and UI). */

/* ================================================================ light */
:root {
  --theme-bg:          #F7F4EE;   /* page */
  --theme-surface:     #FFFFFF;   /* cards */
  --theme-surface-2:   #FBFAF7;   /* hover, quiet fill */
  --theme-paper:       #FFFFFF;   /* behind a sandboxed HTML document: white in both themes, as it was designed */
  --theme-sunken:      #EFECE5;   /* board columns */
  --theme-heading:     #1B3A4B;   /* 11.6:1 on bg */
  --theme-ink:         #2D2A26;   /* body text, 13.4:1 */
  --theme-body:        #3D4F59;   /* secondary text, 8.2:1 */
  --theme-muted:       #556B77;   /* hints, 5.2:1 on bg */
  --theme-label:       #426F75;   /* eyebrow labels, 5.1:1 */
  --theme-line:        rgba(27, 58, 75, .12);
  --theme-line-soft:   rgba(27, 58, 75, .08);
  --theme-field:       rgba(27, 58, 75, .22);
  --theme-accent:      #2E66A8;   /* primary actions and links, 5.4:1 on white */
  --theme-accent-hover:#25568F;
  --theme-on-accent:   #FFFFFF;
  --theme-tint:        #EEF3F8;   /* active nav, chips */
  --theme-qr-dark:     #000000;   /* QR code, 21:1; same in dark mode so phones can scan it */
  --theme-qr-light:    #FFFFFF;
  --theme-track:       #EEF1F4;   /* empty part of meters */
  --theme-danger:      #9B2C1F;   /* 7.0:1 on white */
  /* Categorical chart palette (validated) + neutral. */
  --theme-c-blue: #2E66A8; --theme-c-teal: #2A9D8F; --theme-c-amber: #C77A1F; --theme-c-purple: #8A6BC4; --theme-c-neutral: #B9C4CC;
  /* Purple has no Bootstrap colour: tinted badge pair. */
  --theme-purple-bg: #EDE9F6; --theme-purple-fg: #4B3A85;   /* 7.9:1 */

  --bs-body-bg: var(--theme-bg);
  --bs-body-color: var(--theme-ink);
  --bs-emphasis-color: var(--theme-heading);
  --bs-heading-color: var(--theme-heading);
  --bs-secondary-color: var(--theme-muted);
  --bs-secondary-bg: var(--theme-surface-2);
  --bs-tertiary-bg: var(--theme-sunken);
  --bs-border-color: var(--theme-line);
  --bs-border-color-translucent: var(--theme-line);
  --bs-link-color: var(--theme-accent);
  --bs-link-color-rgb: 46, 102, 168;
  --bs-link-hover-color: var(--theme-heading);
  --bs-link-hover-color-rgb: 27, 58, 75;
  --bs-primary: #2E66A8;   --bs-primary-rgb: 46, 102, 168;
  --bs-success: #2A9D8F;   --bs-success-rgb: 42, 157, 143;
  --bs-warning: #C77A1F;   --bs-warning-rgb: 199, 122, 31;
  --bs-danger: #9B2C1F;    --bs-danger-rgb: 155, 44, 31;
  --bs-secondary: #556B77; --bs-secondary-rgb: 85, 107, 119;
  /* Tinted badges and alerts: background / text (all ≥ 6:1). */
  --bs-primary-bg-subtle: #E6EFFA;   --bs-primary-text-emphasis: #255a94;   --bs-primary-border-subtle: #C6D8EE;
  --bs-success-bg-subtle: #E4EFEA;   --bs-success-text-emphasis: #2F5F4F;   --bs-success-border-subtle: #C7DDD3;
  --bs-warning-bg-subtle: #FBF0DC;   --bs-warning-text-emphasis: #7A4F0B;   --bs-warning-border-subtle: #EED8B0;
  --bs-danger-bg-subtle: #FBE6E3;    --bs-danger-text-emphasis: #9B2C1F;    --bs-danger-border-subtle: #F0C7C1;
  --bs-secondary-bg-subtle: #EEF0F2; --bs-secondary-text-emphasis: #3D4F59; --bs-secondary-border-subtle: #D6DCE0;
  --bs-info-bg-subtle: #EEF3F8;      --bs-info-text-emphasis: #1B3A4B;      --bs-info-border-subtle: #D3DFEA;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-sm: .375rem;
  --bs-focus-ring-color: rgba(46, 102, 168, .35);
  --theme-display: "Fraunces", Georgia, serif;
}

/* ================================================================= dark */
[data-bs-theme="dark"] {
  --theme-bg:          #12202A;
  --theme-surface:     #1A2B36;
  --theme-surface-2:   #1E3140;
  --theme-paper:       #FFFFFF;   /* behind a sandboxed HTML document: white in both themes, as it was designed */
  --theme-sunken:      #15252F;
  --theme-heading:     #EAF0F3;   /* 13.9:1 on surface */
  --theme-ink:         #E2E8EB;
  --theme-body:        #C3CED4;   /* 9.6:1 */
  --theme-muted:       #9DAEB8;   /* 6.4:1 */
  --theme-label:       #8CC0C6;   /* 7.3:1 */
  --theme-line:        rgba(234, 240, 243, .14);
  --theme-line-soft:   rgba(234, 240, 243, .08);
  --theme-field:       rgba(234, 240, 243, .28);
  --theme-accent:      #5B95D6;   /* 5.0:1 on surface */
  --theme-accent-hover:#7AAAE0;
  --theme-on-accent:   #0E1A22;   /* 6.2:1 on accent */
  --theme-tint:        #22394A;
  --theme-track:       #24394A;
  --theme-danger:      #F08A7D;
  --theme-purple-bg: #332B4D; --theme-purple-fg: #CDBDF2;

  --bs-body-bg: var(--theme-bg);
  --bs-body-color: var(--theme-ink);
  --bs-emphasis-color: var(--theme-heading);
  --bs-heading-color: var(--theme-heading);
  --bs-secondary-color: var(--theme-muted);
  --bs-secondary-bg: var(--theme-surface-2);
  --bs-tertiary-bg: var(--theme-sunken);
  --bs-border-color: var(--theme-line);
  --bs-border-color-translucent: var(--theme-line);
  --bs-link-color: var(--theme-accent);
  --bs-link-color-rgb: 91, 149, 214;
  --bs-link-hover-color: var(--theme-heading);
  --bs-link-hover-color-rgb: 234, 240, 243;
  --bs-primary: #5B95D6;   --bs-primary-rgb: 91, 149, 214;
  --bs-danger: #F08A7D;    --bs-danger-rgb: 240, 138, 125;
  --bs-primary-bg-subtle: #1F3A57;   --bs-primary-text-emphasis: #A9CBF2;
  --bs-success-bg-subtle: #1C3B37;   --bs-success-text-emphasis: #9FD9CE;
  --bs-warning-bg-subtle: #43321A;   --bs-warning-text-emphasis: #F2C98A;
  --bs-danger-bg-subtle: #4A2420;    --bs-danger-text-emphasis: #F4B3A9;
  --bs-secondary-bg-subtle: #2A3B47; --bs-secondary-text-emphasis: #C3CED4;
  --bs-info-bg-subtle: #22394A;      --bs-info-text-emphasis: #EAF0F3;
  --bs-primary-border-subtle: #2C4E73; --bs-success-border-subtle: #29504A; --bs-warning-border-subtle: #5C4524;
  --bs-danger-border-subtle: #63322C; --bs-secondary-border-subtle: #3A4D5A; --bs-info-border-subtle: #2F4B60;
  --bs-focus-ring-color: rgba(91, 149, 214, .45);
}

/* ======================================= compiled Bootstrap colours → tokens */
.card, .list-group, .modal, .offcanvas, .dropdown-menu {
  --bs-card-bg: var(--theme-surface);
  --bs-list-group-bg: var(--theme-surface);
  --bs-modal-bg: var(--theme-surface);
  --bs-offcanvas-bg: var(--theme-surface);
  --bs-dropdown-bg: var(--theme-surface);
}
.card { --bs-card-border-color: var(--theme-line); --bs-card-border-radius: var(--bs-border-radius-lg); }
.list-group { --bs-list-group-border-color: var(--theme-line-soft); --bs-list-group-action-hover-bg: var(--theme-surface-2); --bs-list-group-color: var(--theme-ink); }
.btn-primary {
  --bs-btn-bg: var(--theme-accent); --bs-btn-border-color: var(--theme-accent); --bs-btn-color: var(--theme-on-accent);
  --bs-btn-hover-bg: var(--theme-accent-hover); --bs-btn-hover-border-color: var(--theme-accent-hover); --bs-btn-hover-color: var(--theme-on-accent);
  --bs-btn-active-bg: var(--theme-accent-hover); --bs-btn-active-border-color: var(--theme-accent-hover); --bs-btn-active-color: var(--theme-on-accent);
  --bs-btn-disabled-bg: var(--theme-accent); --bs-btn-disabled-border-color: var(--theme-accent); --bs-btn-disabled-color: var(--theme-on-accent);
}
.btn-dark {
  --bs-btn-bg: var(--theme-heading); --bs-btn-border-color: var(--theme-heading); --bs-btn-color: var(--theme-surface);
  --bs-btn-hover-bg: var(--theme-ink); --bs-btn-hover-border-color: var(--theme-ink); --bs-btn-hover-color: var(--theme-surface);
  --bs-btn-active-bg: var(--theme-ink); --bs-btn-active-color: var(--theme-surface);
}
.btn-outline-primary {
  --bs-btn-color: var(--theme-accent); --bs-btn-border-color: var(--theme-accent);
  --bs-btn-hover-bg: var(--theme-accent); --bs-btn-hover-border-color: var(--theme-accent); --bs-btn-hover-color: var(--theme-on-accent);
  --bs-btn-active-bg: var(--theme-accent); --bs-btn-active-border-color: var(--theme-accent); --bs-btn-active-color: var(--theme-on-accent);
}
.btn-outline-secondary {
  --bs-btn-color: var(--theme-heading); --bs-btn-border-color: var(--theme-field); --bs-btn-bg: var(--theme-surface);
  --bs-btn-hover-bg: var(--theme-surface-2); --bs-btn-hover-border-color: var(--theme-field); --bs-btn-hover-color: var(--theme-heading);
  --bs-btn-active-bg: var(--theme-tint); --bs-btn-active-border-color: var(--theme-field); --bs-btn-active-color: var(--theme-heading);
}
.btn-outline-danger {
  --bs-btn-color: var(--theme-danger); --bs-btn-border-color: var(--theme-danger);
  --bs-btn-hover-bg: var(--theme-danger); --bs-btn-hover-border-color: var(--theme-danger); --bs-btn-hover-color: var(--theme-surface);
}
.btn-link { --bs-btn-color: var(--theme-accent); --bs-btn-hover-color: var(--theme-heading); --bs-btn-active-color: var(--theme-heading); }
.btn { --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-control, .form-select { background-color: var(--theme-surface); border-color: var(--theme-field); color: var(--theme-heading); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-control::placeholder { color: var(--theme-muted); opacity: .85; }
.form-check-input { border-color: var(--theme-field); background-color: var(--theme-surface); }
.form-check-input:checked { background-color: var(--theme-accent); border-color: var(--theme-accent); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235B95D6'/%3e%3c/svg%3e"); }
.form-switch.switch-danger .form-check-input:checked { background-color: var(--theme-danger); border-color: var(--theme-danger); }
.nav { --bs-nav-link-color: var(--theme-body); --bs-nav-link-hover-color: var(--theme-heading); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--theme-tint); --bs-nav-pills-link-active-color: var(--theme-heading); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--theme-heading); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-border-color: var(--theme-line); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--theme-ink); --bs-table-border-color: var(--theme-line-soft); }
.bg-purple-subtle { background-color: var(--theme-purple-bg) !important; }
.text-purple-emphasis { color: var(--theme-purple-fg) !important; }
.text-body-secondary { color: var(--theme-muted) !important; }