/* =========================================================
   Mob Media — design tokens

   Four tiers:
     1. Brand        — the base accents, defined once
     2. Plan classes — alias the brand accents per plan
     3. Semantic     — fixed site-wide (notice, success, danger, label)
     4. Neutrals     — fixed site-wide (text, muted, field, border)

   Rule: if a color is used in two places, it comes from here.
   ========================================================= */

/* ---------- 1. Brand accents ---------- */
:root {
  --brand-purple: #9e4dff;
  --brand-cyan:   #28d2ff;
  --brand-purple-deep: #7b3ae0;  /* used by toggle-active and switch-on */
  --brand-pink:   #ef4bd9;
  --brand-gold:   #e5bc2a;
}

/* ---------- 2. Plan classes ---------- */
/* Fallback (no plan class) = purple, the site primary */

:root,
.purple {
  --accent:       var(--brand-purple);
  --glow:         rgba(158,77,255,.16);
  --panel-top:    #221031;
  --panel-bottom: #0e0915;
  --price:        #bd67ff;
}

.cyan {
  --accent:       var(--brand-cyan);
  --glow:         rgba(40,210,255,.15);
  --panel-top:    #0b2833;
  --panel-bottom: #081319;
  --price:        #40d5ff;
}

.pink {
  --accent:       var(--brand-pink);
  --glow:         rgba(239,75,217,.16);
  --panel-top:    #32102f;
  --panel-bottom: #120912;
  --price:        #ff5cdf;
}

.gold {
  --accent:       var(--brand-gold);
  --glow:         rgba(229,188,42,.16);
  --panel-top:    #302508;
  --panel-bottom: #120e07;
  --price:        #ffd534;
}

/* ---------- 3. Semantic ---------- */
:root {
  --notice:  #ffd534;   /* action / attention yellow */
  --notice-ink: #111111; /* text on notice-colored surfaces */
  --success: #22c55e;   /* paid — green, independent of brand gold */
  --danger:  #ff6b6b;   /* cancelled */
  --label:   #c08cff;   /* section-heading violet */
}

/* ---------- 4. Neutrals ---------- */
:root {
  --text:         #ffffff;

  /* Muted greys — same family, graduated by role.
     Named so they're findable. Values chosen per role, not by accident. */
  --muted-bright: #e9e7ef;   /* info-box body copy — most readable */
  --muted:        #d6d2e3;   /* default secondary text */
  --muted-soft:   #c8c1d2;   /* help line, softer secondary */
  --muted-dim:    #aaa7c2;   /* form placeholders — lowest emphasis */
  --muted-faint:  #a99eb2;   /* footer credit line */

  --field:        #14172e;
  --border:       rgba(255,255,255,.10);
}