/*
 * Daybook colour theme: "Lagoon".
 *
 *   brand      teal   #0e7c86   buttons, links, today column    → Bootstrap primary
 *   highlight  coral  #ff7a59   streaks, small accents          → Bootstrap warning
 *   done       mint   #2fb67c   logged entries, progress        → Bootstrap success
 *
 * To re-theme, edit only the two palette blocks below. Everything after them maps the palette
 * onto Bootstrap's own variables (tints and shades via color-mix), so views keep using stock
 * classes like btn-primary, text-success and bg-warning-subtle.
 *
 * Must load after bootstrap.min. The mapping sits under :root, which also matches
 * <html data-bs-theme="dark">, so it wins over Bootstrap's dark defaults and picks up the dark palette.
 */

/* ---------- Palette: light ---------- */
:root,
[data-bs-theme=light] {
  --theme-brand: #0e7c86;
  --theme-brand-rgb: 14, 124, 134;
  --theme-highlight: #ff7a59;
  --theme-highlight-rgb: 255, 122, 89;
  --theme-done: #2fb67c;
  --theme-done-rgb: 47, 182, 124;

  /* Each colour as text on its tinted background (also used for links). */
  --theme-brand-text: #0a5c63;
  --theme-brand-text-rgb: 10, 92, 99;
  --theme-highlight-text: #b8431f;
  --theme-done-text: #1f8a5b;

  /* Body text, card surface, page background and the Today banner. */
  --theme-ink: #10282b;
  --theme-ink-rgb: 16, 40, 43;
  --theme-surface: #fff;
  --theme-surface-rgb: 255, 255, 255;
  --theme-page: #cfdcdd;
  --theme-page-gradient: linear-gradient(135deg, #dde8e9 0%, #cbdadb 55%, #bccdcf 100%);
  --theme-banner-gradient: linear-gradient(135deg, #0e7c86 0%, #0b6770 55%, #0a5760 100%);
}

/* ---------- Palette: dark (only what differs) ---------- */
[data-bs-theme=dark] {
  --theme-brand-text: #7adce3;
  --theme-brand-text-rgb: 122, 220, 227;
  --theme-highlight-text: #ffb8a3;
  --theme-done-text: #7be3b6;

  --theme-ink: #e3f0f1;
  --theme-ink-rgb: 227, 240, 241;
  --theme-surface: #12272a;
  --theme-surface-rgb: 18, 39, 42;
  --theme-page: #030809;
  --theme-page-gradient: linear-gradient(135deg, #0b1b1d 0%, #050d0e 55%, #010303 100%);
  --theme-banner-gradient: linear-gradient(135deg, #0f8791 0%, #0b5f67 60%, #0a4a51 100%);
}

/* ---------- Palette → Bootstrap ---------- */
:root {
  --bs-primary: var(--theme-brand);
  --bs-primary-rgb: var(--theme-brand-rgb);
  --bs-primary-text-emphasis: var(--theme-brand-text);
  --bs-primary-bg-subtle: color-mix(in oklab, var(--theme-brand) 14%, var(--theme-surface));
  --bs-primary-border-subtle: color-mix(in oklab, var(--theme-brand) 40%, var(--theme-surface));

  --bs-warning: var(--theme-highlight);
  --bs-warning-rgb: var(--theme-highlight-rgb);
  --bs-warning-text-emphasis: var(--theme-highlight-text);
  --bs-warning-bg-subtle: color-mix(in oklab, var(--theme-highlight) 16%, var(--theme-surface));
  --bs-warning-border-subtle: color-mix(in oklab, var(--theme-highlight) 40%, var(--theme-surface));

  --bs-success: var(--theme-done);
  --bs-success-rgb: var(--theme-done-rgb);
  --bs-success-text-emphasis: var(--theme-done-text);
  --bs-success-bg-subtle: color-mix(in oklab, var(--theme-done) 16%, var(--theme-surface));
  --bs-success-border-subtle: color-mix(in oklab, var(--theme-done) 40%, var(--theme-surface));

  --bs-body-bg: var(--theme-surface);
  --bs-body-bg-rgb: var(--theme-surface-rgb);
  --bs-body-color: var(--theme-ink);
  --bs-body-color-rgb: var(--theme-ink-rgb);
  --bs-secondary-color: rgba(var(--theme-ink-rgb), .72);
  --bs-secondary-color-rgb: var(--theme-ink-rgb);
  --bs-tertiary-color: rgba(var(--theme-ink-rgb), .45);
  --bs-tertiary-color-rgb: var(--theme-ink-rgb);

  /* Neutrals lean slightly toward the brand colour instead of plain grey. */
  --bs-secondary-bg: color-mix(in oklab, var(--theme-brand) 12%, var(--theme-surface));
  --bs-tertiary-bg: color-mix(in oklab, var(--theme-brand) 6%, var(--theme-surface));
  --bs-border-color: color-mix(in oklab, var(--theme-brand) 16%, var(--theme-surface));

  --bs-link-color: var(--theme-brand-text);
  --bs-link-color-rgb: var(--theme-brand-text-rgb);
  --bs-link-hover-color: var(--theme-brand-text);
  --bs-link-hover-color-rgb: var(--theme-brand-text-rgb);
  --bs-focus-ring-color: rgba(var(--theme-brand-rgb), .25);
}

/* Bootstrap compiles its blue into these components instead of reading --bs-primary. */
.btn-primary {
  --bs-btn-bg: var(--theme-brand);
  --bs-btn-border-color: var(--theme-brand);
  --bs-btn-hover-bg: color-mix(in oklab, var(--theme-brand) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--theme-brand) 86%, #000);
  --bs-btn-active-bg: color-mix(in oklab, var(--theme-brand) 75%, #000);
  --bs-btn-active-border-color: color-mix(in oklab, var(--theme-brand) 75%, #000);
  --bs-btn-disabled-bg: var(--theme-brand);
  --bs-btn-disabled-border-color: var(--theme-brand);
  --bs-btn-focus-shadow-rgb: var(--theme-brand-rgb);
}

.form-check-input:checked {
  background-color: var(--theme-brand);
  border-color: var(--theme-brand);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: color-mix(in oklab, var(--theme-brand) 50%, var(--theme-surface));
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* The focused switch knob is an SVG, which can't read CSS variables: update the fill (%23 = #) with the brand. */
.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='%2387c3c8'/%3e%3c/svg%3e");
}

/* ---------- Theme surfaces ---------- */

/* Page background: a diagonal wash, darker than the cards so they stand out. */
.app-bg {
  background: var(--theme-page) var(--theme-page-gradient) fixed;
}

/* Today page welcome banner. */
.bg-lagoon {
  background: var(--theme-banner-gradient);
}