:root {
  color-scheme: light;
  --paper: #f5f1eb;
  --surface: #fffdf9;
  --surface-muted: #f1ece4;
  --surface-strong: #fff;
  --line: #cdc4b6;
  --ink: #1c2328;
  --muted: #56626c;
  --soft: #8a918f;
  --accent: #1f6177;
  --accent-rgb: 31, 97, 119;
  --accent-active: #113744;
  --accent-hover: #174b5c;
  --primary-contrast: #f7fbfc;
  --heading-font: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --info-bg: #ebf3f6;
  --info-line: #bdd6df;
  --info-ink: #1f5669;
  --success-bg: #edf4ef;
  --success-line: #bfd2c5;
  --success-ink: #2d6248;
  --error-bg: #f8ece8;
  --error-line: #e2bdb5;
  --error-ink: #963c30;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: #11171b;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--soft);
  --bs-border-color: var(--line);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-focus-ring-color: rgba(var(--accent-rgb), 0.18);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-font-sans-serif: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-font-monospace: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* Base */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  color: var(--bs-emphasis-color);
  font-family: var(--heading-font);
  font-weight: 600;
}

a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

.text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

/* Shared Bootstrap overrides */
.btn,
.form-label,
.nav-link,
.form-control,
.form-select,
.input-group-text,
.form-control::file-selector-button {
  font-family: var(--bs-body-font-family);
}

.btn {
  --bs-btn-font-weight: 600;
}

.btn-primary {
  --bs-btn-color: var(--primary-contrast);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--primary-contrast);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--primary-contrast);
  --bs-btn-active-bg: var(--accent-active);
  --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.form-label {
  font-weight: 600;
}

.card {
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--bs-body-color);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-cap-bg: var(--surface-muted);
  --bs-card-cap-color: var(--bs-emphasis-color);
}

.form-control,
.form-select {
  background-color: var(--surface-strong);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.form-control::placeholder {
  color: var(--bs-tertiary-color);
}

.form-control[type="file"],
.form-control[type="file"]:invalid,
.form-control[type="file"]:invalid:focus {
  color: var(--bs-tertiary-color);
}

.form-control[type="file"]:valid,
.form-control[type="file"]:valid:focus {
  color: var(--bs-body-color);
}

.form-control::file-selector-button {
  background-color: var(--surface-muted);
  border-color: transparent var(--bs-border-color) transparent transparent;
  border-style: solid;
  border-width: 0 1px 0 0;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.form-control:hover::file-selector-button {
  background-color: var(--surface);
}

.input-group-text {
  background-color: var(--surface-muted);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

.input-group-text.form-label,
.input-group-text > .form-label {
  margin-bottom: 0;
}

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

.alert {
  background-color: var(--surface-muted);
  border: 1px solid var(--bs-border-color);
  border-left-width: 3px;
  color: var(--bs-body-color);
}

.alert[data-tone="info"] {
  background-color: var(--info-bg);
  border-color: var(--info-line);
  color: var(--info-ink);
}

.alert[data-tone="success"] {
  background-color: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success-ink);
}

.alert[data-tone="error"] {
  background-color: var(--error-bg);
  border-color: var(--error-line);
  color: var(--error-ink);
}

/* Password tool */
.card-tabs-header {
  background-color: var(--surface);
  border-bottom: 0;
}

.card-tabs {
  --bs-nav-tabs-border-color: transparent;
  border-bottom: 0;
}

.card-tabs .nav-link.card-tab {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: var(--bs-secondary-color);
  margin: 0 0.5rem;
}

.card-tabs .nav-link.card-tab:hover {
  border-bottom-color: rgba(var(--accent-rgb), 0.45);
  color: var(--bs-primary);
}

.card-tabs .nav-link.card-tab.active {
  background-color: transparent;
  border-left-width: 0;
  border-bottom-color: var(--bs-primary);
  border-bottom-width: 2px;
  border-right-width: 0;
  color: var(--bs-primary);
  font-weight: 700;
}

.password-toggle-button {
  align-items: center;
  background-color: var(--surface-muted);
  border-left: 0;
  color: var(--bs-secondary-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin-bottom: 0;
}

.password-toggle-button::before {
  background-color: currentColor;
  content: "";
  display: block;
  height: 1rem;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 1rem;
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
  color: var(--bs-primary);
}

/* Icons */
[data-icon="logo"] {
  align-items: center;
  color: var(--bs-link-color);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

a[data-icon="logo"]:hover {
  color: var(--bs-link-hover-color);
}

[data-icon="logo"]::before,
[data-icon="eye-open"]::before,
[data-icon="eye-closed"]::before {
  background-color: currentColor;
  content: "";
  display: block;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

[data-icon="logo"]::before {
  height: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath opacity='.4' d='M96 128C96 110.3 110.3 96 128 96L256 96L256 192C256 227.3 284.7 256 320 256L416 256L416 400L264 400C233.1 400 208 425.1 208 456L208 544L128 544C110.3 544 96 529.7 96 512L96 128z'/%3E%3Cpath d='M256 96L128 96C110.3 96 96 110.3 96 128L96 512C96 529.7 110.3 544 128 544L208 544L208 576L128 576C92.7 576 64 547.3 64 512L64 128C64 92.7 92.7 64 128 64L261.5 64C278.5 64 294.8 70.7 306.8 82.7L429.3 205.3C441.3 217.3 448 233.6 448 250.6L448 400.1L416 400.1L416 256.1L320 256.1C284.7 256.1 256 227.4 256 192.1L256 96.1zM402.7 224L288 109.3L288 192C288 209.7 302.3 224 320 224L402.7 224zM272 448L304 448C334.9 448 360 473.1 360 504C360 534.9 334.9 560 304 560L288 560L288 592C288 600.8 280.8 608 272 608C263.2 608 256 600.8 256 592L256 464C256 455.2 263.2 448 272 448zM304 528C317.3 528 328 517.3 328 504C328 490.7 317.3 480 304 480L288 480L288 528L304 528zM400 448L432 448C458.5 448 480 469.5 480 496L480 560C480 586.5 458.5 608 432 608L400 608C391.2 608 384 600.8 384 592L384 464C384 455.2 391.2 448 400 448zM432 576C440.8 576 448 568.8 448 560L448 496C448 487.2 440.8 480 432 480L416 480L416 576L432 576zM512 464C512 455.2 519.2 448 528 448L576 448C584.8 448 592 455.2 592 464C592 472.8 584.8 480 576 480L544 480L544 512L576 512C584.8 512 592 519.2 592 528C592 536.8 584.8 544 576 544L544 544L544 592C544 600.8 536.8 608 528 608C519.2 608 512 600.8 512 592L512 464z'/%3E%3C/svg%3E");
  width: 100%;
}

[data-icon="eye-open"]::before,
[data-icon="eye-closed"]::before {
  height: 1rem;
  width: 1rem;
}

[data-icon="eye-open"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M66.8 320C82.1 353.3 110.2 398.6 150 437C194.6 479.9 251.5 512 320 512C388.5 512 445.4 479.9 490 437C529.8 398.7 557.9 353.3 573.2 320C557.9 286.7 529.8 241.4 490 203C445.4 160.1 388.5 128 320 128C251.5 128 194.6 160.1 150 203C110.2 241.3 82.1 286.7 66.8 320zM608 320C578 394.7 478.4 544 320 544C161.6 544 62 394.7 32 320C62 245.3 161.6 96 320 96C478.4 96 578 245.3 608 320zM320 416C373 416 416 373 416 320C416 267 373 224 320 224L320 320L224 320C224 373 267 416 320 416zM229.5 288L288 288L288 229.5C260.7 239.1 239.1 260.8 229.5 288zM320 192C390.7 192 448 249.3 448 320C448 390.7 390.7 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192z'/%3E%3C/svg%3E");
}

[data-icon="eye-closed"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M579.5 310C585.1 303.1 595.2 302.1 602 307.7C608.8 313.3 609.9 323.4 604.3 330.2C598.1 337.7 591.1 344.8 584.1 351.6C573 362.3 557.5 376 538 390.1L581.9 466.1C586.3 473.7 583.7 483.5 576.1 487.9C568.4 492.3 558.6 489.7 554.2 482.1L511.4 407.9C490.8 420.5 467.1 432.7 440.4 442.4L463.4 528.3C465.7 536.8 460.6 545.6 452.1 547.9C443.6 550.2 434.8 545.1 432.5 536.6L409.9 452C387 458.1 362.3 462.3 336 463.6L336 560C336 568.8 328.8 576 320 576C311.2 576 304 568.8 304 560L304 463.6C277.7 462.4 253 458.2 230.1 452L207.5 536.6C205.2 545.1 196.4 550.2 187.9 547.9C179.4 545.6 174.3 536.8 176.6 528.3L199.6 442.4C173 432.7 149.2 420.6 128.7 408L85.9 482.1C81.5 489.7 71.7 492.4 64 487.9C56.4 483.5 53.7 473.7 58.2 466.1L102 390.1C82.4 375.9 66.9 362.2 55.8 351.5C48.8 344.7 41.8 337.6 35.6 330.1C30 323.2 31.1 313.1 37.9 307.6C44.8 302 54.9 303.1 60.4 309.9C61.5 311.2 67.6 318.5 78 328.5C89.8 340 107.4 355.4 130 370.8C175.3 401.6 240.2 432 320 432C399.8 432 464.7 401.6 510 370.8C532.6 355.4 550.2 340 562 328.5C572.3 318.5 578.4 311.3 579.6 309.9z'/%3E%3C/svg%3E");
}
