/* ============================================================
   Chakra colours for the ten tones — ONE mapping, keyed by data-freq,
   so the Solfeggio Resonance list and the tone grid can never disagree.
   Mahal's call (2026-10-06):
     396 Root · 417 Sacral · 528 Solar plexus · 639 Heart
     741 Throat · 852 Third eye · 963 Crown
     174 · 285 · 432 = whole body -> the full spectrum
   Same mapping as hero.js, where those three light the whole column.

   --chakra-c     alignment365's chakra token: icons, bars, glows
   --chakra-ink   same hue lifted for TEXT, >= 5.3:1 on the list's
                  background. The raw tokens measure 1.8:1 (third eye),
                  2.7:1 (root, crown) — unreadable as text.
   --chakra-fill  always an IMAGE (solid or spectrum), so one property
                  serves clipped text and bars for both kinds of tone
   --chakra-paint SVG paint for the seed icon (colour or gradient)
   Loaded after poster.css so it wins without !important.
   ============================================================ */
:root {
  --ink-root:      oklch(0.72 0.17 25);
  --ink-sacral:    oklch(0.76 0.16 55);
  --ink-solar:     oklch(0.86 0.17 90);
  --ink-heart:     oklch(0.76 0.17 155);
  --ink-throat:    oklch(0.74 0.14 240);
  --ink-third-eye: oklch(0.70 0.16 280);
  --ink-crown:     oklch(0.74 0.18 315);

  --chakra-spectrum: linear-gradient(90deg,
    var(--chakra-root), var(--chakra-sacral), var(--chakra-solar), var(--chakra-heart),
    var(--chakra-throat), var(--chakra-third-eye), var(--chakra-crown));
  /* root at the base, crown at the top — the body's own order */
  --chakra-spectrum-up: linear-gradient(0deg,
    var(--chakra-root), var(--chakra-sacral), var(--chakra-solar), var(--chakra-heart),
    var(--chakra-throat), var(--chakra-third-eye), var(--chakra-crown));
  --ink-spectrum: linear-gradient(90deg,
    var(--ink-root), var(--ink-sacral), var(--ink-solar), var(--ink-heart),
    var(--ink-throat), var(--ink-third-eye), var(--ink-crown));
}

[data-freq="396"] { --chakra-c: var(--chakra-root);      --chakra-ink: var(--ink-root); }
[data-freq="417"] { --chakra-c: var(--chakra-sacral);    --chakra-ink: var(--ink-sacral); }
[data-freq="528"] { --chakra-c: var(--chakra-solar);     --chakra-ink: var(--ink-solar); }
[data-freq="639"] { --chakra-c: var(--chakra-heart);     --chakra-ink: var(--ink-heart); }
[data-freq="741"] { --chakra-c: var(--chakra-throat);    --chakra-ink: var(--ink-throat); }
[data-freq="852"] { --chakra-c: var(--chakra-third-eye); --chakra-ink: var(--ink-third-eye); }
[data-freq="963"] { --chakra-c: var(--chakra-crown);     --chakra-ink: var(--ink-crown); }

/* single-centre tones: every image-valued property is just the solid colour */
[data-freq] {
  --chakra-fill:     linear-gradient(var(--chakra-c), var(--chakra-c));
  --chakra-fill-up:  var(--chakra-fill);
  --chakra-ink-fill: linear-gradient(var(--chakra-ink), var(--chakra-ink));
  --chakra-paint:    var(--chakra-c);
}

/* whole-body tones: the full spectrum; gold carries their glow */
[data-freq="174"],
[data-freq="285"],
[data-freq="432"] {
  --chakra-c:        var(--poster-gold);
  --chakra-ink:      var(--poster-gold);
  --chakra-fill:     var(--chakra-spectrum);
  --chakra-fill-up:  var(--chakra-spectrum-up);
  --chakra-ink-fill: var(--ink-spectrum);
  --chakra-paint:    url(#chakraSpectrum);
}

/* ============================================================
   The Solfeggio Resonance list
   ============================================================ */
.res-row[data-freq] .res-icon {
  color: var(--chakra-c); /* drives the drop-shadow glow */
  stroke: var(--chakra-paint);
  fill: var(--chakra-paint);
}

/* Text is a SOLID colour by default. Only the whole-body tones go see-through
   to show the spectrum, and only where the browser can paint it: without
   oklch the gradient is invalid, and transparent text over nothing vanishes.
   Older browsers get the solid ink (gold for the whole-body tones). */
[data-freq] { --chakra-text: var(--chakra-ink); }
@supports (color: oklch(0.7 0.1 10)) and ((background-clip: text) or (-webkit-background-clip: text)) {
  [data-freq="174"],
  [data-freq="285"],
  [data-freq="432"] { --chakra-text: transparent; }
}

.res-row[data-freq] .res-title,
.res-row[data-freq] .res-chakra {
  color: var(--chakra-text);
  background-image: var(--chakra-ink-fill);
  -webkit-background-clip: text;
  background-clip: text;
}

.res-chakra {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.res-chakra::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chakra-fill);
  box-shadow: 0 0 8px var(--chakra-c);
}

.res-row[data-freq].active {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--chakra-c) 20%, transparent),
    color-mix(in oklch, var(--chakra-c) 2%, transparent) 80%);
}
.res-row[data-freq].active::after {
  background: var(--chakra-fill-up);
  box-shadow: 0 0 12px var(--chakra-c);
}

/* ============================================================
   The tone grid: a chakra bar on each tile's crown, a tinted rim,
   and a selection glow in the tone's own colour.
   ============================================================ */
.freq-btn[data-freq] {
  border-color: color-mix(in oklch, var(--chakra-c) 42%, transparent);
  background:
    var(--chakra-fill) center top / 46% 3px no-repeat,
    linear-gradient(165deg, rgba(58, 34, 96, 0.60), rgba(12, 40, 54, 0.52));
}
.freq-btn[data-freq] span { color: var(--chakra-ink); }
/* the rim above is 0-2-0 and loads last, so it would also eat style.css's
   hover ring — restate the hover in the tone's colour */
.freq-btn[data-freq]:hover { border-color: color-mix(in oklch, var(--chakra-c) 70%, white); }

.freq-btn[data-freq]::before {
  background: radial-gradient(ellipse at 50% 118%,
    color-mix(in oklch, var(--chakra-c) 38%, transparent), transparent 62%);
}

.freq-btn[data-freq].active {
  background:
    var(--chakra-fill) center top / 46% 3px no-repeat,
    linear-gradient(165deg, #8B5CF6 0%, #C2459B 55%, #E0A23C 100%);
  border-color: color-mix(in oklch, var(--chakra-c) 75%, white);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--chakra-c) 70%, transparent),
    0 0 22px color-mix(in oklch, var(--chakra-c) 55%, transparent),
    0 0 54px color-mix(in oklch, var(--chakra-c) 30%, transparent),
    0 10px 30px rgba(2, 2, 14, 0.45);
}
.freq-btn[data-freq].active span { color: rgba(255, 255, 255, 0.85); }

/* Windows high contrast: clipped-text colour would vanish */
@media (forced-colors: active) {
  .res-row[data-freq] .res-title,
  .res-row[data-freq] .res-chakra {
    background-image: none;
    color: CanvasText;
  }
}