/* VoiceIt brand overrides for Harbor (Clarity Design System).
 *
 * Palette per https://voiceit.io/branding (read out of
 * voiceit3-website/frontend/src/components/Branding/Branding.jsx):
 *   Black              #000000   header
 *   Xanthous (gold)    #FCBC3D   primary action — buttons, active links
 *   Davy's Gray        #505050   secondary text
 *   Cambridge Blue     #75B09C   info / success accents
 *   Lavender Blush     #EEE5E9   subtle background
 *   Anti-flash White   #EFEFEF   page background
 *
 * The override is loaded after Harbor's compiled styles via a sub_filter
 * in /etc/nginx/sites-enabled/voiceit.conf that injects a <link> into
 * the SPA index.html. Sticking to Clarity's --clr-* variable layer means
 * the change survives Harbor upgrades — variable names rarely break.
 */

:root,
:root.dark,
.main-container {
  /* Primary action ramp — was Clarity's blue (#0072a3 / hsl(198, 100%, 32%)).
   * Mapping each step to a tone of Xanthous gold by varying L while
   * keeping H/S in the brand's yellow band. Buttons and active states
   * read as gold instead of blue. */
  --clr-color-action-50:  hsl(40, 97%, 95%);
  --clr-color-action-100: hsl(40, 97%, 88%);
  --clr-color-action-200: hsl(40, 97%, 78%);
  --clr-color-action-300: hsl(40, 97%, 69%);
  --clr-color-action-400: hsl(40, 97%, 62%);
  --clr-color-action-500: hsl(40, 97%, 55%);     /* Xanthous-ish */
  --clr-color-action-600: hsl(40, 97%, 50%);     /* base #FCBC3D */
  --clr-color-action-700: hsl(40, 80%, 42%);
  --clr-color-action-800: hsl(40, 80%, 35%);
  --clr-color-action-900: hsl(40, 80%, 25%);
  --clr-color-action-1000: hsl(40, 80%, 18%);

  /* Header bar — was hsl(198, 0%, 20%) (~#333). Use VoiceIt black. */
  --clr-header-bg-color: #000000;
  --clr-header-font-color: #ffffff;

  /* Primary button — Clarity computes this from --clr-color-action-600
   * by default, but Harbor's compiled styles also hardcode #0072a3 in
   * places. Force the buttons to gold + black text (matching the
   * branding kit's textIsBlack:true on Xanthous). */
  --clr-btn-primary-bg-color: #FCBC3D;
  --clr-btn-primary-color: #000000;
  --clr-btn-primary-border-color: #FCBC3D;
  --clr-btn-primary-hover-bg-color: #E0A82E;
  --clr-btn-primary-hover-color: #000000;

  /* Outline / secondary button text — also gold so links are
   * recognizable. */
  --clr-btn-default-color: #C99830;
  --clr-btn-default-border-color: #C99830;
  --clr-btn-default-checked-bg-color: #FCBC3D;
  --clr-btn-default-checked-color: #000000;

  /* Generic links inherit from --clr-color-action-600 in Clarity, so the
   * action ramp above already covers them. Force in case a stylesheet
   * compiled the old hsl literal: */
  --clr-link-color: #C99830;
  --clr-link-active-color: #C99830;
  --clr-link-visited-color: #C99830;
}

/* Some Harbor stylesheets baked the old #0072a3 directly into rules.
 * Catch the most visible cases (header tabs, breadcrumbs, side-nav
 * highlights) so the page doesn't end up gold-buttons-on-blue-bones. */
.header-2,
.header.header-2,
header.header-2,
header.header-3 {
  background-color: #000000 !important;
}

a, a:visited {
  color: #C99830;
}
a:hover {
  color: #FCBC3D;
}

/* Side-nav active item — Harbor highlights with a blue left border. */
.nav .nav-link.active,
.subnav .nav-link.active {
  border-color: #FCBC3D !important;
  color: #FCBC3D !important;
}

/* Page body — anti-flash white instead of pure white feels softer and
 * matches the website's visual language. */
.content-container, .main-container {
  background-color: #EFEFEF;
}

/* Cambridge Blue accent for "info" alerts and progress bars — keeps a
 * cool counterpoint to the dominant gold. */
.alert-info,
.progress > progress {
  background-color: #75B09C !important;
  color: #000000;
  border-color: #75B09C !important;
}

/* ---------------------------------------------------------------------
 * Hardcoded-color overrides
 * ---------------------------------------------------------------------
 * Harbor's compiled dark-theme.css bypasses CSS variables for several
 * structural surfaces (header bar, login page background, accordion
 * headers) and writes literal hex values like #3f4d5f or #1b2a32. The
 * variable layer above can't reach them, so these need direct selector
 * rules with !important to win against Angular's dynamically-loaded
 * theme stylesheet.
 */

/* Top nav bar — dark theme paints clr-header at #00364d!important */
clr-header,
header, .header,
header.header-1, .header.header-1,
header.header-2, .header.header-2,
header.header-3, .header.header-3 {
  background-color: #000000 !important;
}

/* Sub-nav bars under the header (active project/repo navigation). */
.main-container .header-nav.clr-nav-level-1,
.main-container .subnav.clr-nav-level-1,
.main-container .sub-nav.clr-nav-level-1,
.main-container .header-nav.clr-nav-level-2,
.main-container .subnav.clr-nav-level-2,
.main-container .sub-nav.clr-nav-level-2 {
  background: #000000 !important;
}

/* Login page — Harbor's dark theme paints the form panel #1b2a32 and
 * the page background with a giant inline SVG of abstract vector art.
 * Replace both with VoiceIt black + a clean fade so the login page
 * looks like the rest of the brand. */
.login-wrapper {
  background: #000000 !important;
}
.login-wrapper .login {
  background: #000000 !important;
}

/* Datagrid (project list / repo list) header strip. */
.datagrid-header .datagrid-row,
.datagrid-header .datagrid-row .datagrid-row-sticky,
.datagrid-header .datagrid-row:hover,
.datagrid-header .datagrid-row:focus {
  background-color: #1a1a1a !important;
}

/* Accordion (settings panes). */
.clr-accordion-header { background: #1a1a1a !important; }
.clr-accordion-header:hover,
.clr-accordion-panel-open .clr-accordion-header,
.clr-accordion-panel-error .clr-accordion-header {
  background: #2a2a2a !important;
}

/* "More info…" / general links in the dark theme are hardcoded a pale
 * blue. Force gold so they read on-brand. */
.login a,
.login-wrapper a,
.dark a, .dark a:visited,
a.signup, a.signup:visited {
  color: #FCBC3D !important;
}