/* site.css: brand tokens, Bootstrap mapping, component overrides, grid rules (concept account_site_concept §2). */
:root, [data-bs-theme=light] {
  --gk-page: #f6f3ee;
  --gk-surface: #ffffff;
  --gk-ink: #241f1a;
  --gk-line: #d8d0c4;
  --gk-accent: #7a2e1d;
  --gk-accent-rgb: 122, 46, 29;
  --gk-accent-ink: #ffffff;
  --gk-ok: #1f6b3a;
  --gk-err: #a31616;
  --bs-body-bg: var(--gk-surface);
  --bs-body-bg-rgb: 255,255,255;
  --bs-tertiary-bg: var(--gk-page);
  --bs-tertiary-bg-rgb: 246,243,238;
  --bs-body-color: var(--gk-ink);
  --bs-body-color-rgb: 36,31,26;
  --bs-border-color: var(--gk-line);
  --bs-link-color: var(--gk-accent);
  --bs-link-hover-color: var(--gk-accent);
  --bs-link-color-rgb: var(--gk-accent-rgb);
  --bs-link-hover-color-rgb: var(--gk-accent-rgb);
  --bs-primary: var(--gk-accent);
  --bs-primary-rgb: var(--gk-accent-rgb);
  --bs-focus-ring-color: rgba(var(--gk-accent-rgb), .25);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
}

[data-bs-theme=dark] {
  --gk-page: #1b1815;
  --gk-surface: #26221e;
  --gk-ink: #ece6dc;
  --gk-line: #3d3730;
  --gk-accent: #c4573c;
  --gk-accent-rgb: 196, 87, 60;
  --gk-accent-ink: #ffffff;
  --gk-ok: #6fcf97;
  --gk-err: #ff8a80;
  --bs-body-bg: var(--gk-surface);
  --bs-body-bg-rgb: 38,34,30;
  --bs-tertiary-bg: var(--gk-page);
  --bs-tertiary-bg-rgb: 27,24,21;
  --bs-body-color: var(--gk-ink);
  --bs-body-color-rgb: 236,230,220;
  --bs-border-color: var(--gk-line);
  --bs-link-color: var(--gk-accent);
  --bs-link-hover-color: var(--gk-accent);
  --bs-link-color-rgb: var(--gk-accent-rgb);
  --bs-link-hover-color-rgb: var(--gk-accent-rgb);
  --bs-primary: var(--gk-accent);
  --bs-primary-rgb: var(--gk-accent-rgb);
  --bs-focus-ring-color: rgba(var(--gk-accent-rgb), .25);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
}

/* Bootstrap compiles these to fixed colours; the accent has to reach them. */
.btn-primary {
  --bs-btn-color: var(--gk-accent-ink);
  --bs-btn-bg: var(--gk-accent);
  --bs-btn-border-color: var(--gk-accent);
  --bs-btn-hover-color: var(--gk-accent-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--gk-accent) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--gk-accent) 88%, #000);
  --bs-btn-active-color: var(--gk-accent-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--gk-accent) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--gk-accent) 80%, #000);
  --bs-btn-disabled-color: var(--gk-accent-ink);
  --bs-btn-disabled-bg: var(--gk-accent);
  --bs-btn-disabled-border-color: var(--gk-accent);
  --bs-btn-focus-shadow-rgb: var(--gk-accent-rgb);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--gk-accent);
  box-shadow: 0 0 0 .25rem rgba(var(--gk-accent-rgb), .25);
}
.btn-link,
.nav-link {
  color: var(--gk-accent);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--gk-accent);
  --bs-dropdown-link-active-color: var(--gk-accent-ink);
}
.gk-lang-menu {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: .25rem;
  max-height: 18rem;
  overflow-y: auto;
  min-width: 7rem;
}

/* Alpine (x-cloak) and the HTMX in-flight indicator (htmx's own injected style is switched off). */
[x-cloak] { display: none !important; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* Grid: 16px gutters, no horizontal scroll on a phone. */
.container { --bs-gutter-x: 2rem; }
.gk-main { max-width: 48rem; }
.gk-narrow { max-width: 26rem; }
dd, td, .card-body { overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
.fis.rounded-circle { border-radius: 50%; }
.ph, .ph-duotone, .ph-fill { vertical-align: -0.125em; }