/* CIAO 592 brand theme for Bigcapital.
 *
 * Bigcapital exposes ~205 semantic colour variables, but they all cascade off a
 * handful of Blueprint v4 base tokens. Re-pointing those tokens re-themes the
 * whole app, so this file stays small on purpose.
 *
 * The grey ramp below is the stock Blueprint dark ramp rotated to the brand hue
 * (152deg, taken from #143D2A on ciao592.shop) with each step's ORIGINAL
 * lightness preserved:
 *
 *     dark-gray1  #1c2127 -> #192A22   L 13.1%
 *     dark-gray2  #252a31 -> #20362C   L 16.9%
 *     dark-gray3  #2f343c -> #284336   L 21.0%
 *     dark-gray4  #383e47 -> #2F5041   L 24.9%
 *     dark-gray5  #404854 -> #375D4B   L 29.0%
 *
 * Keeping lightness fixed is what stops a dense accounting table from losing
 * contrast when the hue changes. Do not "tidy" these into rounder numbers.
 *
 * Tuned for dark mode, which is what this install runs. Light mode inherits the
 * gold and cream but not the green chrome.
 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* !important is load-bearing here, not laziness. Vite code-splits the token
 * block into route chunks (PrivatePages-*.css redeclares --color-dark-gray3),
 * and those chunks are appended to <head> lazily -- i.e. AFTER this file. Same
 * specificity, later in the cascade, so they win without !important. Verified:
 * removing it puts the sidebar back to stock #2f343c on any private route. */
:root,
body.bp4-dark {
  --color-dark-gray1: #192A22 !important;
  --color-dark-gray2: #20362C !important;
  --color-dark-gray3: #284336 !important;
  --color-dark-gray4: #2F5041 !important;
  --color-dark-gray5: #375D4B !important;
  --color-primary:    #D4AF37 !important;  /* brand gold, replaces #8abbff */
  --color-white:      #FFF8EC !important;  /* warm cream, replaces flat #fff */
}

body, button, input, select, textarea, .bp4-button, .bp4-input {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Below: the three places Blueprint hardcodes colour past the variable layer.
 * Each was found by inspecting computed styles against the live app. */

/* .bp4-menu keeps its own #2F343C, which shows as a two-tone seam down the
 * sidebar once everything around it is green. */
.bp4-dark .bp4-menu { background: transparent; }

/* .bp4-dark a is hardcoded to #8abbff. */
.bp4-dark a       { color: #D4AF37; }
.bp4-dark a:hover { color: #E8C766; }

/* The topbar avatar colour is assigned in JS (#CB20E5), so it needs !important
 * rather than a variable. */
.dashboard__topbar-user button.bp4-button {
  background: #143D2A !important;
  color: #FFF8EC !important;
  box-shadow: 0 0 0 1px #D4AF37 !important;
}