/*
 * HelTrack web theme tokens.
 * Change this palette to recolor the entire Django web application.
 */
:root {
  /* Brand wordmark (gj-wordmark.js): the logo's own lockup colors from HelTrack_Brand_Kit. One pair per
     surface, not per theme: the script reads the surface from the surrounding text color. Light surfaces:
     Deep Emerald "Hel", Ink Gold "Track"; dark surfaces: white "Hel", Champagne "Track". As a logotype the
     wordmark is exempt from text-contrast minimums (WCAG 1.4.3), so the colors are not darkened. */
  --gj-brand-hel-on-light: #0B3A37;
  --gj-brand-track-on-light: #B0823A;
  --gj-brand-hel-on-dark: #FFFFFF;
  --gj-brand-track-on-dark: #E6C887;

  --theme-brand: #087f78;
  --theme-brand-dark: #075e59;
  --theme-brand-soft: #e8f5f3;
  --theme-brand-border: #c8e6e1;

  --theme-platform: #2f6f9f;
  --theme-platform-dark: #214f73;
  --theme-platform-soft: #edf5fa;
  --theme-platform-border: #c9ddea;

  --theme-customer: #087f8c;
  --theme-customer-dark: #08606a;
  --theme-customer-soft: #e8f8f8;
  --theme-customer-border: #c9e9e9;

  --theme-site: #2f7d4a;
  --theme-site-dark: #205d36;
  --theme-site-soft: #edf8f0;
  --theme-site-border: #cfe8d6;

  --theme-danger: #b42318;
  --theme-warning: #a36d0b;
  --theme-success: #207a45;
  --theme-ink: #17202a;
  --theme-muted: #667085;
  --theme-line: #e3e8ee;
  --theme-surface: #ffffff;
  --theme-canvas: #f3f6f8;
  --theme-sidebar: #102f32;
  --theme-sidebar-ink: #d9e6e7;
  --theme-highlight: #d5a43a;

  /*
   * Persona chrome: the sidebar and welcome banner use these per user type.
   * deep/deeper = dark surface gradient, glow = bright accent on that surface,
   * accent2 = secondary hue used in gradients and animations.
   */
  --theme-platform-deep: #142347;
  --theme-platform-deeper: #0a1229;
  --theme-platform-glow: #8db8ff;
  --theme-platform-accent2: #a78bfa;

  --theme-customer-deep: #0c3a40;
  --theme-customer-deeper: #061f24;
  --theme-customer-glow: #5fe0cf;
  --theme-customer-accent2: #e6bd5c;

  --theme-site-deep: #133a26;
  --theme-site-deeper: #081d12;
  --theme-site-glow: #7ee39b;
  --theme-site-accent2: #d4f06b;

  --theme-chrome-ink: #eef4f5;
  --theme-chrome-muted: rgba(226, 236, 238, .62);
  --theme-chrome-line: rgba(255, 255, 255, .09);
  --theme-chrome-glass: rgba(255, 255, 255, .06);
  --theme-chrome-glass-strong: rgba(255, 255, 255, .11);
  --theme-online: #4ade80;

  /* Compatibility aliases used throughout the existing web CSS. */
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
  --canvas: var(--theme-canvas);
  --brand: var(--theme-brand);
  --brand-dark: var(--theme-brand-dark);
  --accent: var(--theme-highlight);
  --bs-primary: var(--theme-brand);
  --bs-link-color: var(--theme-brand);
  --bs-link-hover-color: var(--theme-brand-dark);
}
.custom-body { --app-context:var(--theme-brand); --app-context-accent:var(--theme-brand); --app-context-dark:var(--theme-brand-dark); --app-context-soft:var(--theme-brand-soft); --app-context-border:var(--theme-brand-border); --app-context-deep:var(--theme-customer-deep); --app-context-deeper:var(--theme-customer-deeper); --app-context-glow:var(--theme-customer-glow); --app-context-accent2:var(--theme-customer-accent2); }
.custom-body[data-role="admin"] { --app-context:var(--theme-platform); --app-context-accent:var(--theme-platform); --app-context-dark:var(--theme-platform-dark); --app-context-soft:var(--theme-platform-soft); --app-context-border:var(--theme-platform-border); --app-context-deep:var(--theme-platform-deep); --app-context-deeper:var(--theme-platform-deeper); --app-context-glow:var(--theme-platform-glow); --app-context-accent2:var(--theme-platform-accent2); }
.custom-body[data-role="customer"] { --app-context:var(--theme-customer); --app-context-accent:var(--theme-customer); --app-context-dark:var(--theme-customer-dark); --app-context-soft:var(--theme-customer-soft); --app-context-border:var(--theme-customer-border); --app-context-deep:var(--theme-customer-deep); --app-context-deeper:var(--theme-customer-deeper); --app-context-glow:var(--theme-customer-glow); --app-context-accent2:var(--theme-customer-accent2); }
.custom-body[data-role="site"] { --app-context:var(--theme-site); --app-context-accent:var(--theme-site); --app-context-dark:var(--theme-site-dark); --app-context-soft:var(--theme-site-soft); --app-context-border:var(--theme-site-border); --app-context-deep:var(--theme-site-deep); --app-context-deeper:var(--theme-site-deeper); --app-context-glow:var(--theme-site-glow); --app-context-accent2:var(--theme-site-accent2); }
.custom-body .btn-primary { --bs-btn-bg:var(--app-context-accent); --bs-btn-border-color:var(--app-context-accent); --bs-btn-hover-bg:var(--app-context-dark); --bs-btn-hover-border-color:var(--app-context-dark); --bs-btn-active-bg:var(--app-context-dark); --bs-btn-active-border-color:var(--app-context-dark); }
.custom-body .form-control:focus,.custom-body .form-select:focus { border-color:var(--app-context-accent); box-shadow:0 0 0 .2rem var(--app-context-soft); }


[data-bs-theme="dark"] {
  --theme-brand: #14a39a;
  --theme-brand-dark: #48c7bf;
  --theme-brand-soft: rgba(20, 163, 154, .16);
  --theme-brand-border: rgba(72, 199, 191, .32);

  --theme-platform: #6aaad4;
  --theme-platform-dark: #8bc2e3;
  --theme-platform-soft: rgba(106, 170, 212, .16);
  --theme-platform-border: rgba(139, 194, 227, .32);

  --theme-customer: #48b5a8;
  --theme-customer-dark: #7bd4ca;
  --theme-customer-soft: rgba(72, 181, 168, .16);
  --theme-customer-border: rgba(123, 212, 202, .32);

  --theme-site: #66c989;
  --theme-site-dark: #8ee1a8;
  --theme-site-soft: rgba(102, 201, 137, .16);
  --theme-site-border: rgba(142, 225, 168, .32);

  --theme-danger: #ff8f86;
  --theme-warning: #f5c46c;
  --theme-success: #86efac;
  --theme-ink: #eef2f6;
  --theme-muted: #aeb8c3;
  --theme-line: #35404c;
  --theme-surface: #171d24;
  --theme-canvas: #11171d;
  --theme-sidebar: #102629;
  --theme-sidebar-ink: #d9e6e7;
  --theme-highlight: #f5c46c;

  --theme-platform-deep: #101c3a;
  --theme-platform-deeper: #070d1d;
  --theme-customer-deep: #0a2f34;
  --theme-customer-deeper: #04171b;
  --theme-site-deep: #0f2f1f;
  --theme-site-deeper: #06150d;
  --theme-chrome-line: rgba(255, 255, 255, .08);

  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
  --canvas: var(--theme-canvas);
  --brand: var(--theme-brand);
  --brand-dark: var(--theme-brand-dark);
  --accent: var(--theme-highlight);
  --bs-body-color: var(--theme-ink);
  --bs-body-bg: var(--theme-canvas);
  --bs-secondary-color: var(--theme-muted);
  --bs-border-color: var(--theme-line);
  --bs-tertiary-bg: #202832;
  --bs-primary: var(--theme-brand);
  --bs-link-color: var(--theme-brand);
  --bs-link-hover-color: var(--theme-brand-dark);
}

/* Brand wordmark: the platform name in its two colors wherever it appears (gj-wordmark.js). */
/* One line, in the logo's Poppins Medium "Hel" + Light "Track" (a "HelTrack"-only subset loaded in
   _language_head.html), whatever display the surrounding brand block gives its spans. */
.gj-wordmark,
.gj-wordmark > span { display: inline !important; }
.gj-wordmark { font-family: "Poppins", var(--gj-script-font, system-ui), sans-serif; letter-spacing: 0; white-space: nowrap; }
.gj-wordmark > .gj-wordmark__hel { color: var(--gj-brand-hel-on-light); font-weight: 500; }
.gj-wordmark > .gj-wordmark__track { color: var(--gj-brand-track-on-light); font-weight: 300; }
.gj-wordmark[data-surface="dark"] > .gj-wordmark__hel { color: var(--gj-brand-hel-on-dark); }
.gj-wordmark[data-surface="dark"] > .gj-wordmark__track { color: var(--gj-brand-track-on-dark); }