/* ============================================================
   UTECH HUB — site theme
   ------------------------------------------------------------
   ONE file controls the colour of the whole site.
   Every page loads it, so edit here and all 86 pages change.

   The site draws ~1,460 colours from these variables. You only
   need to change the values below — nothing else.

   The DARK palette is .pal-indigo (hero, dark bands, footer).
   The LIGHT bands are generated separately further down.
   ============================================================ */

/* ---------- DARK THEME ---------- */
html .pal-indigo,
html .uh-ground.pal-indigo {
  /* page + panels */
  --color-bg:            #071d44;   /* deepest background            */
  --color-surface:       #0d2c6b;   /* cards, panels, dropdowns      */
  --color-plate:         #0a2454;   /* logo plates                   */
  --color-plate-ink:     #9bb8e8;

  /* section bands + glows */
  --color-section:       #0f3a8a;
  --color-section-glow:  #1b56bd;

  /* accent ramp — buttons, links, highlights */
  --color-accent:        #3d8bff;   /* primary accent                */
  --color-accent-100:    #f2f7ff;
  --color-accent-200:    #d8e8ff;   /* text on dark accent surfaces  */
  --color-accent-300:    #a9cbff;
  --color-accent-500:    #3d8bff;
  --color-accent-600:    #2a6edb;
  --color-accent-700:    #1d52a8;
  --color-accent-800:    #143c78;
  --color-accent-900:    #0b2a57;

  /* neutrals — borders and muted text */
  --color-text:          #eaf1ff;
  --color-neutral-100:   #f5f9ff;
  --color-neutral-200:   #dde8fa;
  --color-neutral-300:   #c3d4ee;
  --color-neutral-400:   #a3b8dc;
  --color-neutral-500:   #8499c0;
  --color-neutral-600:   #6a7fa6;
  --color-neutral-700:   #2f4e8f;   /* visible borders               */
  --color-neutral-800:   #15356f;
  --color-neutral-900:   #0a1f47;
  --color-divider:       color-mix(in srgb, #eaf1ff 16%, transparent);
}

/* the dark bands that sit inside light sections */
html .uh-ground .uh-band-dark {
  --color-bg:            #071d44;
  --color-surface:       #0d2c6b;
  --color-section:       #0f3a8a;
  --color-accent:        #3d8bff;
  --color-accent-200:    #d8e8ff;
  --color-accent-300:    #a9cbff;
  --color-accent-700:    #1d52a8;
  --color-neutral-700:   #2f4e8f;
  --color-neutral-800:   #15356f;
}

/* body background behind everything */
html body,
html body:has(.pal-indigo) { background: #071d44; }

/* ---------- LIGHT BANDS ---------- */
/* every other section is light; its accent should match the dark theme */
html .uh-ground > section:nth-of-type(even):not(.uh-band-dark),
html .uh-ground > section.uh-sec-light {
  --color-accent:        #1d52a8;
  --color-accent-200:    #123a7d;
  --color-accent-300:    #1a4a96;
  --color-accent-500:    #1d52a8;
  --color-accent-600:    #4a82d8;
  --color-accent-700:    #aecaf0;
  --color-accent-800:    #d8e6fa;
  --color-accent-900:    #eef4fd;
}

/* ---------- HEADER ---------- */
/* the header sits OUTSIDE .uh-ground, where --color-accent is undefined,
   so these need explicit values rather than var() */
header .btn-primary {
  background: linear-gradient(90deg, #3d8bff, #2a6edb) !important;
  border-color: #3d8bff !important;
  color: #071d44 !important;
  box-shadow: 0 2px 14px rgba(61,139,255,.30);
}
header .btn-primary:hover {
  color: #071d44 !important;
  box-shadow: 0 4px 20px rgba(61,139,255,.45);
}
.uh-portal-ico        { color: #c3d4ee; }
.uh-portal-ico:hover  { color: #3d8bff; background: rgba(61,139,255,.12); }
.uh-portal-ico:focus-visible { outline-color: #3d8bff; }
.uh-portal-tip        { background: #0d2c6b; border-color: #2f4e8f; color: #dde8fa; }
.uh-burger            { border-color: #2f4e8f; color: #eaf1ff; }