/* ============================================================
   COLORS — hazard-tape palette on a near-black editorial canvas
   ============================================================ */
:root {
  /* --- Brand hazards --- */
  --color-jelly-mint:      #3cffd0; /* signature acid-mint accent */
  --color-ultraviolet:     #5200ff; /* complementary brand hazard */
  --color-ultraviolet-90:  rgba(82, 0, 255, 0.9); /* softened cathode */

  /* --- Secondary / accent --- */
  --color-mint-border:     #309875; /* darker mint for outlines */
  --color-link-blue:       #3860be; /* the one hover color on the site */
  --color-focus-cyan:      #1eaedb; /* keyboard focus only */
  --color-purple-rule:     #3d00bf; /* StoryStream timeline rail */

  /* --- Story-tile accent blocks (saturated, never washes) --- */
  --color-tile-mint:       #3cffd0;
  --color-tile-purple:     #5200ff;
  --color-tile-yellow:     #f5e000;
  --color-tile-pink:       #ff5dc8;
  --color-tile-orange:     #ff6a2c;
  --color-tile-blue:       #2e6bff;
  --color-tile-white:      #ffffff;

  /* --- Surfaces --- */
  --color-canvas:          #131313; /* default dark surface */
  --color-surface-slate:   #2d2d2d; /* secondary card background */
  --color-image-frame:     #313131; /* 1px frame around imagery */
  --color-white:           #ffffff; /* hazard white */
  --color-black:           #000000; /* text on mint/yellow/white tiles */

  /* --- Text --- */
  --color-text-primary:    #ffffff; /* headlines + display */
  --color-text-secondary:  #949494; /* bylines, timestamps, credits */
  --color-text-muted:      #e9e9e9; /* button text on slate */
  --color-text-inverted:   #131313; /* text on accent tiles */

  /* --- States --- */
  --color-overlay-black:   rgba(0, 0, 0, 0.33); /* quiet 1px ring */
  --color-dim-gray:        #8c8c8c; /* pressed button background */
  --color-hover-white:     rgba(255, 255, 255, 0.2); /* button hover invert */
  --color-ring-gray:       #c2c2c2; /* hover ring shadow */

  /* ---------- Semantic aliases ---------- */
  --bg-canvas:             var(--color-canvas);
  --bg-card:               var(--color-canvas);
  --bg-card-secondary:     var(--color-surface-slate);
  --surface-slate:         var(--color-surface-slate);

  --text-display:          var(--color-text-primary);
  --text-body:             var(--color-text-primary);
  --text-meta:             var(--color-text-secondary);
  --text-on-accent:        var(--color-black);

  --accent-primary:        var(--color-jelly-mint);
  --accent-secondary:      var(--color-ultraviolet);
  --link-hover:            var(--color-link-blue);

  --border-hairline:       var(--color-white);
  --border-image:          var(--color-image-frame);
  --border-mint:           var(--color-jelly-mint);
  --border-uv:             var(--color-ultraviolet);
  --focus-ring:            var(--color-focus-cyan);
}