:root {
  /* ===== Brand palette (base) ===== */
  --bleep-gold:    #DBB74C; /* stripe 1 */
  --bleep-amber:   #EB9B51; /* stripe 2 */
  --bleep-orange:  #E45C31; /* stripe 3 */
  --bleep-red:     #CD3838; /* stripe 4 */
  --bleep-purple:  #7D498D; /* stripe 5 */
  --bleep-black:   #000000;
  --bleep-white:   #FFFFFF;

  /* ===== Neutrals (warm-tinted greys derived from black) ===== */
  --bleep-ink:     #0A0A0A;  /* near-black text on light */
  --bleep-grey-90: #1C1B1A;
  --bleep-grey-70: #45413E;
  --bleep-grey-50: #767069;
  --bleep-grey-30: #B6AFA8;
  --bleep-grey-15: #E2DCD4;
  --bleep-grey-08: #F1ECE6;
  --bleep-paper:   #FBF8F4;  /* warm off-white page background */

  /* ===== Tints (for soft backgrounds / badges) ===== */
  --bleep-gold-tint:   #F8F0DA;
  --bleep-amber-tint:  #FBEBDA;
  --bleep-orange-tint: #FBE0D6;
  --bleep-red-tint:    #F7DCDC;
  --bleep-purple-tint: #ECE0F0;

  /* ===== Semantic aliases ===== */
  --color-primary:        var(--bleep-orange);
  --color-primary-hover:  #C94A22;
  --color-primary-press:  #AE3D18;
  --color-accent:         var(--bleep-purple);
  --color-accent-hover:   #6A3C79;

  --surface-page:    var(--bleep-paper);
  --surface-card:    var(--bleep-white);
  --surface-inverse: var(--bleep-black);
  --surface-muted:   var(--bleep-grey-08);

  --text-strong:  var(--bleep-ink);
  --text-body:    var(--bleep-grey-70);
  --text-muted:   var(--bleep-grey-50);
  --text-on-dark: var(--bleep-white);
  --text-on-color:var(--bleep-white);

  --border-subtle: var(--bleep-grey-15);
  --border-strong: var(--bleep-ink);

  --color-success: #2E8B57;
  --color-warning: var(--bleep-amber);
  --color-danger:  var(--bleep-red);
  --color-info:    var(--bleep-purple);

  /* The signature 5-stripe gradient band, left→right or as stacked rows */
  --bleep-spectrum: linear-gradient(
    90deg,
    var(--bleep-gold) 0%, var(--bleep-gold) 20%,
    var(--bleep-amber) 20%, var(--bleep-amber) 40%,
    var(--bleep-orange) 40%, var(--bleep-orange) 60%,
    var(--bleep-red) 60%, var(--bleep-red) 80%,
    var(--bleep-purple) 80%, var(--bleep-purple) 100%
  );
}