/*
 * format-d branding for OTS.
 *
 * Loaded after the upstream app.css, so this file only redefines Bootstrap 5
 * custom properties and the handful of component classes OTS actually uses
 * (navbar `bg-primary-subtle`, card `border-primary-subtle`, the `btn-success`
 * call to action, `btn-outline-secondary` in the toolbar). The upstream
 * stylesheet stays untouched, which keeps version upgrades to a tag bump.
 *
 * Palette: the warm grey scale of the format-d website theme
 * (tailwind.preset.theme-project.cjs in format-d-website-2024).
 */

:root {
  --fd-gray-10: #fffefb;
  --fd-gray-50: #faf9f4;
  --fd-gray-100: #e3e2de;
  --fd-gray-150: #d8d7d3;
  --fd-gray-200: #bebdbd;
  --fd-gray-300: #a2a1a0;
  --fd-gray-400: #878685;
  --fd-gray-500: #6d6b6a;
  --fd-gray-600: #535251;
  --fd-gray-700: #3b3a39;
  --fd-gray-800: #242423;
  --fd-gray-900: #100f0f;

  --fd-blue-300: #9599e6;
  --fd-blue-400: #7879d9;

  --bs-border-radius: 0.125rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.125rem;

  /*
   * The font stack is deliberately NOT overridden here. Bootstrap's own
   * `--bs-font-sans-serif` already starts at `system-ui`, which is what the
   * brand font (Campton, not licensed for this host) degrades to anyway.
   * Putting `ui-sans-serif` in front of it made Safari on macOS render the
   * native <select> popup at the wrong size and off-screen — the popup is an
   * OS widget and cannot resolve that generic keyword.
   */
}

/* ---------- light ---------- */

[data-bs-theme="light"] {
  --bs-body-bg: var(--fd-gray-50);
  --bs-body-color: var(--fd-gray-700);
  --bs-emphasis-color: var(--fd-gray-900);
  --bs-secondary-color: var(--fd-gray-500);
  --bs-border-color: var(--fd-gray-100);
  --bs-tertiary-bg: var(--fd-gray-100);

  /*
   * OTS tints its card frames by state: `primary` while composing, `info` on
   * the create form, `success` on the result screen. The brand has one neutral
   * surface, so all three resolve to the same warm grey and the frame stops
   * changing colour between steps. Meaning is carried by the wording, and by
   * red where something is actually destructive.
   */
  --bs-primary-bg-subtle: var(--fd-gray-100);
  --bs-primary-border-subtle: var(--fd-gray-150);
  --bs-success-bg-subtle: var(--fd-gray-100);
  --bs-success-border-subtle: var(--fd-gray-150);
  --bs-info-bg-subtle: var(--fd-gray-100);
  --bs-info-border-subtle: var(--fd-gray-150);

  --bs-primary: var(--fd-gray-800);
  --bs-primary-rgb: 36, 36, 35;
  --bs-link-color: var(--fd-gray-800);
  --bs-link-color-rgb: 36, 36, 35;
  --bs-link-hover-color: var(--fd-gray-900);

  --bs-success: #4c794c;
  --bs-success-rgb: 76, 121, 76;
  --bs-danger: #b43e39;
  --bs-danger-rgb: 180, 62, 57;
  --bs-warning: #8d8b27;
  --bs-warning-rgb: 141, 139, 39;

  --bs-form-control-bg: var(--fd-gray-10);
}

/* ---------- dark ---------- */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--fd-gray-900);
  --bs-body-color: var(--fd-gray-50);
  --bs-emphasis-color: var(--fd-gray-10);
  --bs-secondary-color: var(--fd-gray-300);
  --bs-border-color: var(--fd-gray-700);
  --bs-tertiary-bg: var(--fd-gray-800);

  --bs-primary-bg-subtle: var(--fd-gray-800);
  --bs-primary-border-subtle: var(--fd-gray-700);
  --bs-success-bg-subtle: var(--fd-gray-800);
  --bs-success-border-subtle: var(--fd-gray-700);
  --bs-info-bg-subtle: var(--fd-gray-800);
  --bs-info-border-subtle: var(--fd-gray-700);

  --bs-primary: var(--fd-gray-50);
  --bs-primary-rgb: 250, 249, 244;
  --bs-link-color: var(--fd-gray-50);
  --bs-link-color-rgb: 250, 249, 244;
  --bs-link-hover-color: var(--fd-gray-100);

  --bs-success: #699368;
  --bs-success-rgb: 105, 147, 104;
  --bs-danger: #ce5f57;
  --bs-danger-rgb: 206, 95, 87;
  --bs-warning: #b6b674;
  --bs-warning-rgb: 182, 182, 116;

  --bs-form-control-bg: var(--fd-gray-800);
}

/* ---------- navbar and card ---------- */

.navbar.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-bottom: 1px solid var(--bs-primary-border-subtle);
}

.card.border-primary-subtle,
.card.border-success-subtle,
.card.border-info-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
  background-color: var(--bs-body-bg);
}

.card-header.bg-primary-subtle,
.card-header.bg-success-subtle,
.card-header.bg-info-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-bottom-color: var(--bs-primary-border-subtle);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  letter-spacing: 0.019rem;
}

/* The wordmark carries the name; keep it at cap height of the navbar. */
.navbar-brand img {
  height: 22px;
  width: auto;
}

/* ---------- buttons ----------
 * Bootstrap bakes button colours into its compiled CSS rather than reading the
 * runtime tokens, so the variants OTS renders are restated here.
 * `btn-success` is the primary call to action ("Create the secret!").
 */

.btn-success,
.btn-primary {
  --bs-btn-bg: var(--fd-gray-800);
  --bs-btn-border-color: var(--fd-gray-800);
  --bs-btn-color: var(--fd-gray-50);
  --bs-btn-hover-bg: var(--fd-gray-100);
  --bs-btn-hover-border-color: var(--fd-gray-800);
  --bs-btn-hover-color: var(--fd-gray-800);
  --bs-btn-active-bg: var(--fd-gray-900);
  --bs-btn-active-border-color: var(--fd-gray-900);
  --bs-btn-active-color: var(--fd-gray-50);
  --bs-btn-disabled-bg: var(--fd-gray-100);
  --bs-btn-disabled-border-color: var(--fd-gray-100);
  --bs-btn-disabled-color: var(--fd-gray-300);
}

[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--fd-gray-50);
  --bs-btn-border-color: var(--fd-gray-50);
  --bs-btn-color: var(--fd-gray-800);
  --bs-btn-hover-bg: var(--fd-gray-800);
  --bs-btn-hover-border-color: var(--fd-gray-50);
  --bs-btn-hover-color: var(--fd-gray-50);
  --bs-btn-active-bg: var(--fd-gray-100);
  --bs-btn-active-border-color: var(--fd-gray-100);
  --bs-btn-active-color: var(--fd-gray-800);
  --bs-btn-disabled-bg: var(--fd-gray-600);
  --bs-btn-disabled-border-color: var(--fd-gray-600);
  --bs-btn-disabled-color: var(--fd-gray-400);
}

.btn-outline-secondary,
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(36, 36, 35, 0.2);
  --bs-btn-color: var(--fd-gray-800);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--fd-gray-800);
  --bs-btn-hover-color: var(--fd-gray-800);
  --bs-btn-active-bg: var(--fd-gray-800);
  --bs-btn-active-border-color: var(--fd-gray-800);
  --bs-btn-active-color: var(--fd-gray-50);
}

/*
 * The one button that stays coloured: "burn this secret now" is destructive
 * and has to read as such. Bootstrap's stock red is too loud next to the warm
 * greys, so it becomes the red of the website theme.
 */
.btn-danger {
  --bs-btn-bg: #b43e39;
  --bs-btn-border-color: #b43e39;
  --bs-btn-color: var(--fd-gray-50);
  --bs-btn-hover-bg: #912724;
  --bs-btn-hover-border-color: #912724;
  --bs-btn-hover-color: var(--fd-gray-50);
  --bs-btn-active-bg: #691a18;
  --bs-btn-active-border-color: #691a18;
  --bs-btn-active-color: var(--fd-gray-50);
}

[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: #ce5f57;
  --bs-btn-border-color: #ce5f57;
  --bs-btn-color: var(--fd-gray-900);
  --bs-btn-hover-bg: #df857c;
  --bs-btn-hover-border-color: #df857c;
  --bs-btn-hover-color: var(--fd-gray-900);
  --bs-btn-active-bg: #b43e39;
  --bs-btn-active-border-color: #b43e39;
  --bs-btn-active-color: var(--fd-gray-50);
}

/* Error messages keep the same red, as a tint rather than a fill. */
.alert-danger {
  --bs-alert-bg: #fff4f2;
  --bs-alert-border-color: #f6d1cc;
  --bs-alert-color: #691a18;
}

[data-bs-theme="dark"] .alert-danger {
  --bs-alert-bg: #291110;
  --bs-alert-border-color: #691a18;
  --bs-alert-color: #eaaca4;
}

/* Small status icons in the attachment list (disabled here, kept consistent). */
.text-success {
  color: #4c794c !important;
}
.text-danger {
  color: #b43e39 !important;
}
.text-warning {
  color: #8d8b27 !important;
}

[data-bs-theme="dark"] .text-success {
  color: #699368 !important;
}
[data-bs-theme="dark"] .text-danger {
  color: #ce5f57 !important;
}
[data-bs-theme="dark"] .text-warning {
  color: #b6b674 !important;
}

[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-border-color: rgba(227, 226, 222, 0.2);
  --bs-btn-color: var(--fd-gray-50);
  --bs-btn-hover-border-color: var(--fd-gray-50);
  --bs-btn-hover-color: var(--fd-gray-50);
  --bs-btn-active-bg: var(--fd-gray-50);
  --bs-btn-active-border-color: var(--fd-gray-50);
  --bs-btn-active-color: var(--fd-gray-800);
}

/* ---------- focus ---------- */

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible {
  border-color: var(--fd-blue-300);
  box-shadow: 0 0 0 0.2rem rgba(149, 153, 230, 0.4);
  outline: 0;
}

/* ---------- misc ---------- */

.form-control,
.form-select {
  background-color: var(--bs-form-control-bg);
  border-color: var(--fd-gray-400);
}

/*
 * The <select> popup is drawn by the operating system, not by the page. Hand
 * it a concrete family it can resolve, never a generic CSS keyword, and keep
 * the size in absolute pixels. Both guard against Safari on macOS rendering
 * the popup oversized and outside the window.
 */
.form-select,
.form-select option {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  border-color: var(--fd-gray-600);
  color: var(--bs-body-color);
}

footer,
.text-muted {
  color: var(--bs-secondary-color) !important;
}