/* =========================================================================
   keeValue theme for Weblate
   -------------------------------------------------------------------------
   Linked from WEBLATE_EXTRA_HTML_HEAD, which renders after Weblate's own
   stylesheets. Weblate routes its accents through --wl-* custom properties
   (styles/variables.css, style-dark.css), so retheming is a token swap.

   Every token is !important on a selector at least as specific as
   :root[data-bs-theme="…"], because Manage → Appearance writes its colors
   there with !important (/css/custom.css) once anyone saves that form.
   Loading last, this file then wins over it, so Git stays the source.

   Dark mode: style-dark.css is loaded for an explicit "dark" choice, or for
   "auto" behind a prefers-color-scheme media query. The dark values appear
   twice for the same reason, and come after the light block so they win
   over it at equal specificity. KEEP THE TWO BLOCKS IN SYNC.
   ========================================================================= */

/* Roboto Condensed, self-hosted as a variable font (400-700 in one file).
   SIL Open Font License 1.1, see roboto-condensed-OFL.txt. */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(roboto-condensed-latin-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(roboto-condensed-latin-ext-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
:root[data-bs-theme="light"] {
  --bs-font-sans-serif: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif !important;
  --bs-body-font-family: var(--bs-font-sans-serif) !important;

  /* Header bar: the near-black of the site's navbar. */
  --wl-header-bg: #1d2020 !important;
  --bs-dark: #1d2020 !important;
  --bs-dark-rgb: 29, 32, 32 !important;
  --wl-header-text: rgba(255, 255, 255, .82) !important;
  --wl-header-text-hover: #bb7c7a !important;
  --wl-focus-color: #bb7c7a !important;

  /* Rose. #bb7c7a is the logo fill; white-on-rose fills use #a36462 (AA on
     white), and link text the darker #8f5250, which stays AA on Weblate's
     grey card headers and editor rows. */
  --wl-navi-color: #a36462 !important;
  --wl-navi-text-color: #fff !important;
  --wl-hover-color: #8f5250 !important;
  --wl-color-link: #8f5250 !important;
  --wl-color-link-hover: #6f3e3d !important;
  --wl-color-link-strong: #6f3e3d !important;
  --wl-color-link-strong-hover: #5a3231 !important;
  --bs-link-color: #8f5250 !important;
  --bs-link-color-rgb: 143, 82, 80 !important;
  --bs-link-hover-color: #6f3e3d !important;
  --bs-link-hover-color-rgb: 111, 62, 61 !important;
  --bs-emphasis-color: #8f5250 !important;
  --bs-emphasis-color-rgb: 143, 82, 80 !important;
  --wl-color-primary: #a36462 !important;
  --wl-color-primary-strong: #8f5250 !important;
  --wl-color-accent-bg: #a36462 !important;
  --wl-primary-button-color: #a36462 !important;
  --wl-color-search-icon: #a36462 !important;
  --bs-primary: #a36462 !important;
  --bs-primary-rgb: 163, 100, 98 !important;

  --wl-progress-color: rgba(187, 124, 122, .6) !important;
  --wl-progress-approved-color: #8f5250 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --wl-header-bg: #0f1112 !important;
    --bs-dark: #0f1112 !important;
    --bs-dark-rgb: 15, 17, 18 !important;
    --wl-header-text: rgba(242, 241, 239, .75) !important;
    --wl-header-text-hover: #c98d8b !important;
    --wl-focus-color: #c98d8b !important;

    /* The light rose is too light to carry white, so fills keep #a36462. */
    --wl-navi-color: #dda6a4 !important;
    --wl-navi-text-color: #20191a !important;
    --wl-hover-color: #c98d8b !important;
    --wl-color-link: #dda6a4 !important;
    --wl-color-link-hover: #f0c9c7 !important;
    --wl-color-link-strong: #dda6a4 !important;
    --wl-color-link-strong-hover: #f0c9c7 !important;
    --bs-link-color: #dda6a4 !important;
    --bs-link-color-rgb: 221, 166, 164 !important;
    --bs-link-hover-color: #f0c9c7 !important;
    --bs-link-hover-color-rgb: 240, 201, 199 !important;
    --wl-color-primary: #a36462 !important;
    --wl-color-primary-strong: #8f5250 !important;
    --wl-color-accent-bg: #a36462 !important;
    --wl-primary-button-color: #a36462 !important;
    --wl-color-search-icon: #dda6a4 !important;
    --bs-primary: #a36462 !important;
    --bs-primary-rgb: 163, 100, 98 !important;

    --wl-progress-color: rgba(201, 141, 139, .6) !important;
    --wl-progress-approved-color: #a36462 !important;
  }
}

:root[data-bs-theme="dark"] {
  --wl-header-bg: #0f1112 !important;
  --bs-dark: #0f1112 !important;
  --bs-dark-rgb: 15, 17, 18 !important;
  --wl-header-text: rgba(242, 241, 239, .75) !important;
  --wl-header-text-hover: #c98d8b !important;
  --wl-focus-color: #c98d8b !important;

  --wl-navi-color: #dda6a4 !important;
  --wl-navi-text-color: #20191a !important;
  --wl-hover-color: #c98d8b !important;
  --wl-color-link: #dda6a4 !important;
  --wl-color-link-hover: #f0c9c7 !important;
  --wl-color-link-strong: #dda6a4 !important;
  --wl-color-link-strong-hover: #f0c9c7 !important;
  --bs-link-color: #dda6a4 !important;
  --bs-link-color-rgb: 221, 166, 164 !important;
  --bs-link-hover-color: #f0c9c7 !important;
  --bs-link-hover-color-rgb: 240, 201, 199 !important;
  --wl-color-primary: #a36462 !important;
  --wl-color-primary-strong: #8f5250 !important;
  --wl-color-accent-bg: #a36462 !important;
  --wl-primary-button-color: #a36462 !important;
  --wl-color-search-icon: #dda6a4 !important;
  --bs-primary: #a36462 !important;
  --bs-primary-rgb: 163, 100, 98 !important;

  --wl-progress-color: rgba(201, 141, 139, .6) !important;
  --wl-progress-approved-color: #a36462 !important;
}

body {
  font-family: var(--bs-font-sans-serif);
}

/* style-dark.css and Appearance set these under [data-bs-theme], hence the
   second selector. */
.navbar,
:root[data-bs-theme] .navbar {
  --bs-navbar-color: var(--wl-header-text) !important;
  --bs-navbar-brand-color: #fff !important;
  --bs-navbar-brand-hover-color: var(--wl-focus-color) !important;
  --bs-navbar-hover-color: var(--wl-focus-color) !important;
}

/* Weblate paints every navbar icon with the header text color, which would
   wash the mark out to grey. */
.navbar .navbar-brand path {
  fill: #bb7c7a;
}

.nav-pills,
:root[data-bs-theme] .nav-pills {
  --bs-nav-pills-link-active-bg: var(--wl-color-primary) !important;
}

/* These hard-code Weblate's teal instead of reading the tokens above. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--wl-color-primary-strong) !important;
}

.btn-info {
  --bs-btn-color: var(--wl-color-link) !important;
  --bs-btn-border-color: var(--wl-color-link) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--wl-color-link) !important;
  --bs-btn-hover-bg: var(--wl-color-primary-strong) !important;
  --bs-btn-hover-border-color: var(--wl-color-primary-strong) !important;
  --bs-btn-active-bg: var(--wl-color-primary-strong) !important;
  --bs-btn-active-border-color: var(--wl-color-primary-strong) !important;
  --bs-btn-disabled-color: var(--wl-color-primary-strong) !important;
}