/* ── Rhapsody brand primitives ────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH for the signature gradient + the chord mark. Shared by
   the site (via @import in site.css) and the splash (via <link>), so every surface
   stays identical — edit here once. */

:root{
  /* Signature gradient — ENGINE-GENERATED, perceptually smooth: A59 amethyst → A71
     rose (50%) → A11 papaya, DIRECT each leg. The product's own gradient solution,
     not a hand-picked one. Regenerate via the engine:
        gradient("#9100FF","#FF009F","direct") + gradient("#FF009F","#FF9100","direct")
     Powers .gradbar, every .grad-text heading, and CTA fills.

     THE ORDER ABOVE WAS INVERTED HERE FOR A LONG TIME — it read amethyst → papaya
     (50%) → rose, with the two legs swapped to match. The shipped stops and
     gen_gradients._brand_gradient() both did, and always did, amethyst → rose →
     papaya. A comment describing a recipe nobody runs is the one that goes wrong
     quietly, so it is worth saying which of the two was the liar.

     This declaration and the copies in colorpages/data/grad.css and the Figma
     plugin's ui/index.html are written from ONE string by gen_gradients.py. They
     used to be maintained by hand and had drifted to two different stop counts. */
  --grad:linear-gradient(92deg, #9100FF 0.0%, #9610FA 2.6%, #9C19F6 5.3%, #A11FF1 7.9%, #A623EC 10.5%, #AC26E7 13.2%, #B229E2 15.8%, #B72BDD 18.4%, #BD2CD9 21.1%, #C32DD4 23.7%, #C92DCF 26.3%, #CF2CCA 28.9%, #D52BC4 31.6%, #DA2ABF 34.2%, #E127BA 36.8%, #E724B5 39.5%, #ED20B0 42.1%, #F31AAA 44.7%, #F910A5 47.4%, #FF009F 50.0%, #FF1E9B 52.6%, #FF2D96 55.3%, #FF3892 57.9%, #FF418D 60.5%, #FF4988 63.2%, #FF5083 65.8%, #FF567E 68.4%, #FF5D79 71.1%, #FF6273 73.7%, #FF686D 76.3%, #FF6D67 78.9%, #FF7261 81.6%, #FF775A 84.2%, #FF7B52 86.8%, #FF8049 89.5%, #FF843F 92.1%, #FF8933 94.7%, #FF8D23 97.4%, #FF9100 100.0%);
  /* Identity primitives. These lived in site.css, which meant the file that calls
     itself the single source of truth for the chord mark did not actually hold its
     colors -- and could not, for any surface that links brand.css on its own. */
  --amethyst:#9100FF;  /* A59 */
  --orange:#FF9100;    /* A11 papaya */
  --rose:#FF009F;      /* A71 */
  --chord-dot:11px;   /* chord dot diameter */
  --chord-gap:4px;    /* gap between chord dots */
}

/* Gradient surfaces — all draw from the one --grad above. */
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.gradbar{height:6px; background:var(--grad);}

/* Chord mark — three dots. Markup: <span class="dots"><i></i><i></i><i></i></span> */
.dots{display:inline-flex; gap:var(--chord-gap);}
.dots i{width:var(--chord-dot); height:var(--chord-dot); border-radius:50%; display:block; flex:none;}
.dots i:nth-child(1){background:var(--amethyst);}
.dots i:nth-child(2){background:var(--orange);}
.dots i:nth-child(3){background:var(--rose);}