/* =========================================================================
   k8box.io — per-domain accent override on top of `assets/css/base.css`.

   Up to 2026-05-04 this file carried a parallel set of design tokens
   (--max-width, --bg, --text, …) that pre-dated the shared base. After
   the K8Box-family CSS unification, base.css is the single source of
   truth for layout, typography, components, and the desktop widening
   to 1320px. Every per-domain stylesheet now reduces to: pick the
   accent palette + add brand-asset overrides, nothing else.

   Sibling sites follow the same minimal-override pattern:
     atrium.k8box.io   → violet
     tally.k8box.io    → amber
     spectrum.k8box.io → indigo-purple
     tcwlab.com        → orange
     k8box.io          → blue → mint  (this file, mirrors the logo gradient)
   ========================================================================= */

:root {
  /* K8Box brand colours, lifted from the gradient logo in
     `_shared/brand/k8box-logo.svg`:
       primary  #3C69B1  cobalt blue   ← gradient stop 0
       soft     #71C1A7  mint teal     ← gradient stop 1
     The previous deep-teal accent (#0d6e6e) didn't match the brand. */
  --accent: #3C69B1;
  --accent-soft: #71C1A7;
  --accent-glow: rgba(60, 105, 177, 0.16);
  --accent-tint: rgba(60, 105, 177, 0.06);
  --accent-paper: #f3f7fc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6f9adb;
    --accent-soft: #93d4be;
    --accent-glow: rgba(111, 154, 219, 0.22);
    --accent-tint: rgba(255, 255, 255, 0.04);
    --accent-paper: #0f1620;
  }
}

/* ----- brand logo (header) --------------------------------------------- */

.brand--logo {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0;
  border-bottom: none;
  /* fade-in on mount */
  animation: brand-fade 280ms ease both;
}

.brand--logo img {
  height: 100%;
  width: auto;
  display: block;
  transition: filter 220ms ease, transform 220ms ease;
}

.brand--logo:hover img {
  filter: drop-shadow(0 2px 8px var(--accent-glow));
  transform: translateY(-1px);
}

@keyframes brand-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand--logo,
  .brand--logo:hover img {
    animation: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .brand--logo { height: 28px; }
}

@media print {
  .brand--logo img {
    filter: grayscale(1) contrast(1.1);
  }
}