/*
 * Vibrant theme layer — loaded on every page after style.css and site.css
 * (see includes/header.php).
 *
 * Direction: "vibrant on brand". The Mifa blue and cyan stay as the anchor; a
 * violet mid-tone joins the brand gradient, and a hue palette (violet, teal,
 * orange, rose, emerald) gives categories and icon tiles their own color.
 *
 * How it works
 *  - style.css keeps all its rules inside @layer. This file is deliberately
 *    UNLAYERED, so it overrides those utilities without specificity fights.
 *  - Nearly every color in the site is a CSS variable, so recoloring the tokens
 *    below recolors buttons, gradients, badges, links and bands everywhere.
 *  - Light-mode tokens are scoped to :root:not(.dark) so they can never leak
 *    into the dark theme.
 *
 * To switch this layer off, remove its <link> from includes/header.php.
 */

/* ------------------------------------------------------------------ */
/* 1. Hue palette — used to color-code categories and icon tiles       */
/* ------------------------------------------------------------------ */
:root {
  --c-blue: #2563eb;
  --c-violet: #7c3aed;
  --c-teal: #0d9488;
  --c-orange: #ea580c;
  --c-rose: #db2777;
  --c-emerald: #059669;
  --c-sky: #0284c7;
  --c-amber: #d97706;
  --gradient-rainbow: linear-gradient(90deg, #1257e0, #6b4cf2 24%, #12b7e6 48%, #0d9488 66%, #f59e0b 84%, #db2777);
}
.dark {
  --c-blue: #5a9bff;
  --c-violet: #a78bfa;
  --c-teal: #2dd4bf;
  --c-orange: #fb923c;
  --c-rose: #f472b6;
  --c-emerald: #34d399;
  --c-sky: #38bdf8;
  --c-amber: #fbbf24;
}

/* ------------------------------------------------------------------ */
/* 2. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root:not(.dark) {
  --bg: #ffffff;
  --bg-elevated: #f5f7ff;
  --surface: #ffffff;
  --surface-2: #edf1ff;
  --border: #23308a1c;
  --border-strong: #23308a33;
  --text-primary: #0b1233;
  --text-secondary: #46557f;
  --text-tertiary: #5d6c94;
  --accent: #1257e0;
  --accent-2: #12b7e6;
  --accent-3: #2a4fe0;
  --accent-mid: #3b6cf0;
  --gradient-aurora: linear-gradient(115deg, #1257e0 0%, #6b4cf2 46%, #0fb0e6 100%);
  --gradient-soft: linear-gradient(135deg, #1257e01f 0%, #7c3aed1a 50%, #12b7e61f 100%);
  --gradient-navy: linear-gradient(135deg, #0a1a66 0%, #1a3fd1 46%, #5b34e6 100%);
  --glow-accent: 0 0 0 1px #5b4bf033, 0 22px 46px -22px #5b4bf080;
  --shadow-card: 0 1px 2px #14205a0d, 0 14px 32px -20px #2a3aa04d;
}

.dark {
  --bg: #070a1c;
  --bg-elevated: #0b1030;
  --surface: #0f1538;
  --surface-2: #171f4d;
  --border: #a5b4fc24;
  --border-strong: #a5b4fc3d;
  --text-primary: #f1f4ff;
  --text-secondary: #b3bee0;
  --text-tertiary: #8390bd;
  --accent: #4c8dff;
  --accent-2: #27d4f5;
  --accent-3: #93b4ff;
  --accent-mid: #5a9bff;
  --gradient-aurora: linear-gradient(115deg, #3b82f6 0%, #8b5cf6 48%, #22d3ee 100%);
  --gradient-soft: linear-gradient(135deg, #3b82f629 0%, #8b5cf624 50%, #22d3ee24 100%);
  --gradient-navy: linear-gradient(135deg, #050a26 0%, #101e6e 46%, #3b1fa8 100%);
  --glow-accent: 0 0 0 1px #8b5cf647, 0 22px 50px -22px #8b5cf699;
  --shadow-card: 0 1px 2px #0000004d, 0 14px 32px -20px #0000008c;
}

::selection {
  background: color-mix(in oklab, var(--c-violet) 28%, transparent);
}

/* ------------------------------------------------------------------ */
/* 3. Brand strip and header polish                                    */
/* ------------------------------------------------------------------ */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: var(--gradient-rainbow);
  pointer-events: none;
}

/* A soft colored hairline under the header once the page scrolls. */
#site-header.backdrop-blur-xl::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--accent-2), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 4. Backgrounds                                                      */
/* ------------------------------------------------------------------ */

/* Tinted bands get faint color washes instead of flat gray-blue. */
section.bg-bg-elevated {
  background-image:
    radial-gradient(55% 70% at 8% 0%, color-mix(in oklab, var(--c-violet) 8%, transparent), transparent 70%),
    radial-gradient(45% 65% at 100% 100%, color-mix(in oklab, var(--c-sky) 9%, transparent), transparent 70%);
}
.dark section.bg-bg-elevated {
  background-image:
    radial-gradient(55% 70% at 8% 0%, color-mix(in oklab, var(--c-violet) 14%, transparent), transparent 70%),
    radial-gradient(45% 65% at 100% 100%, color-mix(in oklab, var(--c-sky) 12%, transparent), transparent 70%);
}

/* Extra color layer added to every hero by aurora_background() (partials.php). */
.aurora-extra {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 50% at 80% 10%, color-mix(in oklab, var(--c-violet) 17%, transparent), transparent 72%),
    radial-gradient(32% 44% at 58% 100%, color-mix(in oklab, var(--c-rose) 12%, transparent), transparent 72%),
    radial-gradient(30% 40% at 6% 82%, color-mix(in oklab, var(--c-teal) 13%, transparent), transparent 72%);
}
.dark .aurora-extra {
  background:
    radial-gradient(38% 50% at 80% 10%, color-mix(in oklab, var(--c-violet) 24%, transparent), transparent 72%),
    radial-gradient(32% 44% at 58% 100%, color-mix(in oklab, var(--c-rose) 16%, transparent), transparent 72%),
    radial-gradient(30% 40% at 6% 82%, color-mix(in oklab, var(--c-teal) 18%, transparent), transparent 72%);
}

/* The dark navy blocks (global reach, CTA banner, footer) become deep
 * blue-to-violet gradients with colored glows, and their text is lightened so
 * it stays readable over the more vivid background. */
.navy-band {
  background:
    radial-gradient(48% 70% at 100% 0%, color-mix(in oklab, var(--c-rose) 30%, transparent), transparent 62%),
    radial-gradient(44% 64% at 0% 100%, color-mix(in oklab, var(--accent-2) 30%, transparent), transparent 62%),
    var(--gradient-navy);
  --text-secondary: #dbe5ff;
  --text-tertiary: #cbd6f8;
  --border: #ffffff26;
  --border-strong: #ffffff42;
  --accent-3: #b5ccff;
}
/* Gradient text switches to a light gradient so it never disappears into the band. */
.navy-band .text-gradient {
  background-image: linear-gradient(115deg, #a9c9ff 0%, #ddd0ff 50%, #8ff2ff 100%);
}
/* Primary links become white pills on the band: maximum contrast, clear call to action. */
.navy-band a.bg-aurora-gradient {
  background: #fff;
  color: #1a2a9a;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 20, 0.55);
}
.navy-band a.bg-aurora-gradient:hover {
  background: #eef2ff;
}
footer.navy-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-rainbow);
}

/* ------------------------------------------------------------------ */
/* 5. Cards, icon tiles, buttons                                       */
/* ------------------------------------------------------------------ */

/* Cards get real depth, and hover picks up the card's own hue. */
.card-glow {
  box-shadow: var(--shadow-card);
}
.card-glow:hover {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--hue, var(--accent)) 24%, transparent),
    0 24px 46px -22px color-mix(in oklab, var(--hue, var(--accent)) 60%, transparent);
  transform: translateY(-3px);
}

/* Cycle a hue across sibling cards so every grid is multi-colored. */
:where(.grid) > :nth-child(6n + 1) { --hue: var(--c-blue); }
:where(.grid) > :nth-child(6n + 2) { --hue: var(--c-violet); }
:where(.grid) > :nth-child(6n + 3) { --hue: var(--c-teal); }
:where(.grid) > :nth-child(6n + 4) { --hue: var(--c-orange); }
:where(.grid) > :nth-child(6n + 5) { --hue: var(--c-rose); }
:where(.grid) > :nth-child(6n + 6) { --hue: var(--c-emerald); }

/* Inside an explicitly hue-coded region (e.g. a product page), grid children keep
 * the region's hue instead of joining the cycle. */
[class*="hue-"] :where(.grid) > * {
  --hue: inherit;
}

/* An element can opt into a fixed hue (e.g. a product's category). Declared after
 * the cycle above so it wins when both apply to the same element. */
.hue-blue { --hue: var(--c-blue); }
.hue-violet { --hue: var(--c-violet); }
.hue-teal { --hue: var(--c-teal); }
.hue-orange { --hue: var(--c-orange); }
.hue-rose { --hue: var(--c-rose); }
.hue-emerald { --hue: var(--c-emerald); }
.hue-sky { --hue: var(--c-sky); }
.hue-amber { --hue: var(--c-amber); }

/* Hue-coded primitives: a solid gradient icon tile and a small color dot.
 * Used by the Products menu, cards, filters and pages. */
.pd-tile {
  background: linear-gradient(135deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 66%, #000));
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--hue, var(--accent)) 70%, transparent);
}
.dark .pd-tile {
  background: linear-gradient(135deg, color-mix(in oklab, var(--hue, var(--accent)) 80%, #000), color-mix(in oklab, var(--hue, var(--accent)) 46%, #000));
}
.pd-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hue, var(--accent));
}
.pd-dot--sm {
  width: 7px;
  height: 7px;
}

/* Soft tinted icon tiles ... */
.grid > * span.bg-surface-2:is(.text-accent, .text-accent-3) {
  color: var(--hue, var(--accent-3));
  background: color-mix(in oklab, var(--hue, var(--accent)) 13%, var(--surface));
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 26%, transparent);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
/* ... which fill with their hue when the card is hovered. */
.grid > * .group:hover span.bg-surface-2:is(.text-accent, .text-accent-3) {
  color: #fff;
  background: linear-gradient(135deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 68%, #000));
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--hue, var(--accent)) 70%, transparent);
}
/* ... and solid gradient tiles / dots pick up the same hue. */
.grid > * span.bg-aurora-gradient {
  background: linear-gradient(135deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 68%, #000));
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--hue, var(--accent)) 70%, transparent);
}
/* Dark theme hues are bright, so start the gradient a step deeper to keep white icons legible. */
.dark .grid > * span.bg-aurora-gradient {
  background: linear-gradient(135deg, color-mix(in oklab, var(--hue, var(--accent)) 80%, #000), color-mix(in oklab, var(--hue, var(--accent)) 46%, #000));
}

/* Primary buttons: the gradient glides across on hover. */
a.bg-aurora-gradient,
button.bg-aurora-gradient {
  background-size: 190% 100%;
  background-position: 0 0;
  transition: background-position 0.5s ease, filter 0.25s, box-shadow 0.25s, transform 0.15s;
}
a.bg-aurora-gradient:hover,
button.bg-aurora-gradient:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
}

/* Colored focus ring that matches the palette. */
:focus-visible {
  outline-color: var(--c-violet);
}

@media (prefers-reduced-motion: reduce) {
  a.bg-aurora-gradient,
  button.bg-aurora-gradient,
  .card-glow:hover {
    transform: none;
    transition: none;
  }
}