/* ============================================================
   3FIFTY — Color tokens  (FINALIZED)
   The staple is neon/laser green (#07FF2A), sampled from the
   solid album covers. The system is built black + green + white,
   with eclectic "release-art" accents (orange, hot pink, cyan)
   used sparingly, plus a semantic status set for UI states.
   ============================================================ */

:root {
  /* ---- Brand green — full ramp ----------------------------- */
  --green-100: #EAFFEE;     /* faint tint — surfaces / hover-fill on light */
  --green-200: #C6FFD0;     /* soft tint — chips, selected rows            */
  --green-300: #7CFF93;     /* mid tint                                    */
  --green-400: #46FF61;     /* lighter — hover on dark                     */
  --green-500: #07FF2A;     /* THE green — primary brand color             */
  --green-600: #00D622;     /* pressed / deeper                            */
  --green-700: #00A91B;     /* text-on-white safe green                    */
  --green-800: #007A13;     /* deep green — dense text / borders on light  */
  --green-900: #004A0C;     /* deepest saturated green (palette 2)         */
  --green-950: #00380A;     /* near-ink forest green (palette 3)           */
  --green-glow: rgba(7, 255, 42, 0.55); /* neon glow / focus              */

  /* ---- Ink (near-black, slightly warm) --------------------- */
  --ink-900: #0A0B0A;       /* primary dark surface / text      */
  --ink-800: #141614;
  --ink-700: #1E211E;
  --ink-600: #2A2E2A;
  --ink-500: #3A3F3A;

  /* ---- Neutrals -------------------------------------------- */
  --white:   #FFFFFF;
  --paper:   #FAFAF7;       /* off-white page background        */
  --gray-100:#F0F1EE;
  --gray-200:#E2E4DF;
  --gray-300:#C9CCC5;
  --gray-400:#A2A69E;
  --gray-500:#767A72;
  --gray-600:#53574F;

  /* ---- Approved palettes ----------------------------------- *
     Four approved monochromatic ramps. Pick ONE per design, then
     add at most 1–2 accents. Palette 1 (Neon Deep) is the default.
     ------------------------------------------------------------- */

  /* Palette 1 — NEON DEEP (default) */
  --p1-1: #07FF2A;  --p1-2: #00D622;  --p1-3: #00A91B;  --p1-4: #007A13;  --p1-5: #004A0C;

  /* Palette 2 — INK ANCHOR */
  --p2-1: #07FF2A;  --p2-2: #00D622;  --p2-3: #00A91B;  --p2-4: #007A13;  --p2-5: #0A0B0A;

  /* Palette 3 — GREEN TO INK */
  --p3-1: #07FF2A;  --p3-2: #00A91B;  --p3-3: #007A13;  --p3-4: #00380A;  --p3-5: #0A0B0A;

  /* Palette 4 — TINT UP (light-ground designs) */
  --p4-1: #DCFFD9;  --p4-2: #AFFFAB;  --p4-3: #07FF2A;  --p4-4: #00B117;  --p4-5: #006C08;

  /* Default palette aliases — resolve to Palette 1 */
  --palette-1: var(--p1-1);  --palette-2: var(--p1-2);  --palette-3: var(--p1-3);
  --palette-4: var(--p1-4);  --palette-5: var(--p1-5);

  /* ---- Accents --------------------------------------------- *
     RULE: start from an approved green ramp, then add ONE accent.
     Two only if a second signal is genuinely needed — never three.
     Gray is neutral and always permitted.                        */
  --hot-pink:      #FF2E97;  /* releases, hype, a single CTA      */
  --electric-blue: #1B5BFF;  /* links, info, technical UI         */
  --violet:        #7A3CFF;  /* editorial, features, premium      */
  --amber:         #FFA61C;  /* warmth, live indicators           */
  --teal:          #00B39A;  /* calm data, secondary charts       */
  --accent-gray:   #767A72;  /* the safe neutral                  */

  /* ---- Semantic status (UI feedback) ----------------------- */
  --success:      #00A91B;  /* on brand — reuses green-700      */
  --success-tint: #E7FBEA;
  --warning:      #FFB020;  /* amber                            */
  --warning-tint: #FFF3DC;
  --danger:       #FF3B30;  /* error red                        */
  --danger-tint:  #FFECEA;
  --info:         #00B8D4;  /* readable cyan                    */
  --info-tint:    #E2FAFF;

  /* ---- Semantic aliases ------------------------------------ */
  --brand:            var(--green-500);
  --brand-ink:        var(--ink-900);   /* text/marks on green   */

  --surface-page:     var(--paper);
  --surface-card:     var(--white);
  --surface-dark:     var(--ink-900);
  --surface-dark-2:   var(--ink-800);
  --surface-green:    var(--green-500);
  --surface-green-soft: var(--green-100); /* faint green fill    */

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--gray-500);
  --text-on-dark:     var(--white);
  --text-on-dark-mut: var(--gray-400);
  --text-on-green:    var(--ink-900);
  --text-link:        var(--green-700);

  --border-subtle:    var(--gray-200);
  --border-strong:    var(--ink-900);
  --border-on-dark:   rgba(255,255,255,0.12);

  --focus-ring:       var(--green-glow);

  --accent-hot:       var(--hot-pink);
  --accent-pop:       var(--violet);
  --accent-cool:      var(--electric-blue);
}