/* ============================================================
   DISCO GRINGO — COLOR TOKENS
   Bubblegum pink + jade teal + ink black on paper white.
   Pulled from the hand-drawn merch artwork: pink letters
   (#E8A0C0), teal jungle + dancers, heavy black marker outline.
   ============================================================ */
:root {
  /* ---- Brand: Bubblegum Pink (primary) ---- */
  --pink-50:  #FCEFF5;
  --pink-100: #F8DCE9;
  --pink-200: #F2C2D8;
  --pink-300: #EDB0CC;
  --pink-400: #E8A0C0;   /* ★ signature pink — the wordmark fill */
  --pink-500: #DD86AD;
  --pink-600: #C96B95;
  --pink-700: #A8527A;   /* pressed / deep rose */

  /* ---- Brand: Jade Teal (secondary) ---- */
  --teal-50:  #E4F3F0;
  --teal-100: #BFE4DD;
  --teal-200: #84CcC0;
  --teal-300: #4FB3A4;
  --teal-400: #2E9E92;   /* ★ jungle + dancers teal */
  --teal-500: #1F857B;
  --teal-600: #166A62;
  --teal-700: #0F4F49;   /* deep pressed teal */

  /* ---- Ink (the marker outline + text) ---- */
  --ink-900: #0E0E0E;    /* ★ heavy outline black */
  --ink-800: #1A1A1A;
  --ink-700: #2C2C2C;
  --ink-500: #545454;
  --ink-400: #7A7A7A;    /* muted text */
  --ink-300: #A6A6A6;

  /* ---- Paper / neutrals ---- */
  --paper:      #FFFFFF;   /* the tee white */
  --paper-warm: #FBF6F0;   /* warm off-white surface */
  --paper-pink: #FDF4F8;   /* faintest pink wash */
  --line-200:   #ECE5E0;   /* hairline on warm surfaces */

  /* ---- Earth & hardware accents (from the scene) ---- */
  --brown-trunk: #9C6B43;  /* palm / eucalyptus trunks */
  --grey-speaker:#C7C7C9;  /* PA speaker body */
  --grey-vinyl:  #7E7E82;  /* parachuted record */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */
  --color-bg:            var(--paper);
  --color-bg-warm:       var(--paper-warm);
  --color-bg-pink:       var(--paper-pink);
  --color-bg-teal:       var(--teal-400);
  --color-bg-ink:        var(--ink-900);

  --color-surface:       var(--paper);
  --color-surface-alt:   var(--paper-warm);
  --color-border:        var(--ink-900);   /* default = bold outline */
  --color-border-soft:   var(--line-200);

  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-400);
  --color-text-invert:   var(--paper);
  --color-text-on-pink:  var(--ink-900);
  --color-text-on-teal:  var(--paper);

  --color-primary:       var(--pink-400);
  --color-primary-hover: var(--pink-500);
  --color-primary-press: var(--pink-700);
  --color-on-primary:    var(--ink-900);

  --color-accent:        var(--teal-400);
  --color-accent-hover:  var(--teal-500);
  --color-accent-press:  var(--teal-700);
  --color-on-accent:     var(--paper);

  /* ---- Status (kept on-brand, not generic) ---- */
  --color-success: var(--teal-500);
  --color-warning: #E8A23D;
  --color-danger:  #D5453F;
  --color-info:    var(--teal-400);

  /* ---- Focus ---- */
  --color-focus: var(--teal-400);
}