/* Wiggleverse — Color tokens
   Source of truth: wiggleverse-www/assets/tokens.css (brand BRAND.md §8–9).
   Dark "sky" is the primary ground; Paper is for long reading. No-center motif. */

:root {
  /* ---- Brand palette (base values) ---- */
  --wv-midnight: #0E1230;   /* sky / ground — primary dark background */
  --wv-indigo:   #1C2150;   /* raised surfaces on dark (cards, mobile nav) */
  --wv-indigo-2: #232A63;   /* hover state for raised surfaces */
  --wv-lilac:    #9B8CFF;   /* accent — "the bonds between us"; links, nodes */
  --wv-violet:   #7C6FE0;   /* secondary links / strokes (on light) */
  --wv-gold:     #F4C76B;   /* warmth / horizon / primary CTAs */
  --wv-gold-hi:  #F7D488;   /* gold hover */
  --wv-starlight:#EDEAFF;   /* nodes / text on dark */
  --wv-paper:    #F6F4FB;   /* light-mode background */
  --wv-ink:      #3B2F7A;   /* text on light */
  --wv-night:    #090C22;   /* footer / deepest ground */

  /* CTA text-on-gold (very dark gold-brown, not pure black) */
  --wv-gold-ink: #2A2003;
  --wv-gold-ink-soft: #6B4E10; /* "soon" tag text on gold tint */

  /* ---- Alpha derivations (lilac / gold / starlight washes) ---- */
  --wv-lilac-08:  rgba(155, 140, 255, .08);
  --wv-lilac-12:  rgba(155, 140, 255, .12);
  --wv-lilac-16:  rgba(155, 140, 255, .16);
  --wv-lilac-18:  rgba(155, 140, 255, .18);
  --wv-lilac-32:  rgba(155, 140, 255, .32);
  --wv-gold-28:   rgba(244, 199, 107, .28);
  --wv-gold-40:   rgba(244, 199, 107, .40);
  --wv-starlight-85: rgba(237, 234, 255, .85);
  --wv-starlight-78: rgba(237, 234, 255, .78);
  --wv-starlight-60: rgba(237, 234, 255, .60);
  --wv-starlight-55: rgba(237, 234, 255, .55);

  /* ---- Semantic aliases ---- */
  --surface-sky:       var(--wv-midnight);  /* page ground (dark) */
  --surface-raised:    var(--wv-indigo);    /* cards / panels on dark */
  --surface-raised-hi: var(--wv-indigo-2);  /* raised hover */
  --surface-paper:     var(--wv-paper);     /* long-reading light sections */
  --surface-card-light:#FFFFFF;             /* build-cards on paper */
  --surface-footer:    var(--wv-night);

  --text-on-dark:      var(--wv-starlight);
  --text-on-dark-soft: var(--wv-starlight-78);
  --text-on-dark-mute: var(--wv-starlight-60);
  --text-on-light:     var(--wv-ink);
  --text-on-light-soft:#4B4170;

  --accent:            var(--wv-lilac);     /* links + nodes on dark */
  --accent-on-light:   var(--wv-violet);    /* links + strokes on light */
  --cta:               var(--wv-gold);      /* primary action / horizon */
  --cta-hover:         var(--wv-gold-hi);
  --cta-text:          var(--wv-gold-ink);

  --border-soft:       var(--wv-lilac-16);  /* hairlines on dark */
  --border-card:       var(--wv-lilac-18);
  --border-strong:     var(--wv-lilac-32);
  --focus-ring:        var(--wv-gold);
}