/* Sizeless brand colours for the SFTPGo web client.
 *
 * Loaded through branding.web_client.extra_css, AFTER the theme's own
 * style.bundle.css, so plain declarations win on specificity ties and nothing
 * here needs !important.
 *
 * Scope: the web CLIENT only, which is what our clients see -- the share
 * password prompt and the download/upload page. The admin UI is left stock
 * deliberately, so an SFTPGo upgrade that changes these class names breaks a
 * page the team sees daily rather than one a client meets mid-transfer.
 *
 * WHY TOKENS RATHER THAN COMPONENT RULES: the theme is Bootstrap 5.3 with
 * Metronic on top, and it derives buttons, links, focus rings, spinners,
 * checkboxes and badges from a small set of --bs-* custom properties.
 * Overriding the tokens recolours all of them consistently; overriding
 * individual components would miss the ones nobody thought to check and would
 * drift apart on the next upgrade.
 *
 * LIGHT AND DARK ARE SEPARATE BLOCKS, AND THAT IS THE WHOLE POINT.
 * The first version of this file set one palette across :root,
 * [data-bs-theme=light] AND [data-bs-theme=dark] together. That shipped a real
 * bug: the light tints landed on dark mode's near-black surfaces, so a panel
 * background of #e6eeff sat under #F5F5F5 text at a contrast ratio of 1.07:1 --
 * text you genuinely cannot read. Bootstrap defines this palette three times
 * for a reason. Never collapse these blocks again.
 *
 * Every value below is measured against the surface it actually lands on,
 * targeting WCAG AA: 4.5:1 for text, 3:1 for button text and UI edges.
 *
 * Source of the light values: the --accent / --accent-dark / --accent-soft
 * custom properties on sizeless.co. Keep them in step with the website rather
 * than hand-picking a nearby blue. The dark values are those same hues lifted
 * for a dark surface -- the identical move the stock theme makes when it
 * shifts its own #0069E0 to #1F87FF.
 */

:root,
[data-bs-theme="light"] {
  /* 5.13:1 as a link on white, and as a button fill under white text. */
  --bs-primary: #0b5fff;
  --bs-primary-rgb: 11, 95, 255;

  /* Hover and pressed states. Metronic reads -active, not -hover. Darker
   * than the base, because the surface underneath is white. */
  --bs-primary-active: #094bcc;

  /* Tinted backgrounds: selected rows, subtle badges, hovered list items. */
  --bs-primary-light: #e6eeff;
  --bs-primary-bg-subtle: #e6eeff;
  --bs-primary-border-subtle: #b9cfff;

  /* Focus rings and translucent overlays are built from this. */
  --bs-primary-clarity: rgba(11, 95, 255, 0.2);

  --bs-link-color: #0b5fff;
  --bs-link-color-rgb: 11, 95, 255;
  --bs-link-hover-color: #094bcc;
  --bs-link-hover-color-rgb: 9, 75, 204;
}

/* Dark mode. Surfaces here are --bs-body-bg #15171C with --bs-body-color
 * #F5F5F5, so the brand blue has to come UP in lightness and the tinted
 * backgrounds have to go DOWN. Ratios quoted against those two values. */
[data-bs-theme="dark"] {
  /* 5.51:1 as a link on the dark background. White text on it as a button
   * fill is 3.25:1 -- above the 3:1 bar for button text, and the same
   * trade-off the stock theme accepts with white on its own #1F87FF. */
  --bs-primary: #4d8bff;
  --bs-primary-rgb: 77, 139, 255;

  /* Hover goes LIGHTER on a dark surface, not darker. 7.31:1. */
  --bs-primary-active: #6ea6ff;

  /* The tokens that caused the original bug. Dark navy, not pale blue:
   * page text on this reads 15.45:1. */
  --bs-primary-light: #0a1c3d;
  --bs-primary-bg-subtle: #0a1c3d;

  /* 3.49:1 against the page background -- an edge you can actually see,
   * which is the 3:1 UI-component threshold rather than a text one. */
  --bs-primary-border-subtle: #3568d4;

  /* Slightly stronger alpha than light mode: a 0.2 overlay disappears
   * against near-black. */
  --bs-primary-clarity: rgba(77, 139, 255, 0.25);

  --bs-link-color: #4d8bff;
  --bs-link-color-rgb: 77, 139, 255;
  --bs-link-hover-color: #6ea6ff;
  --bs-link-hover-color-rgb: 110, 166, 255;
}

/* The logo is square and the theme's login header sizes it for a wordmark, so
 * without a cap it renders comically large above the password prompt. */
.login-form img,
.d-flex.flex-center img.h-45px,
img[src*="/static/branding/logo.png"] {
  max-height: 64px;
  width: auto;
}