/* ============================================================
   BlackPrint — Color tokens
   Sourced from the Figma "Design System / colors" + "colors2" frames.
   Four interchangeable sets: Shades (depth), Accents, Map labels,
   Magnitudes. Plus semantic aliases for light (print/web) and dark
   (platform) surfaces.
   ============================================================ */

:root {
  /* --- Set 1 · Shades (the "depth" scale) -------------------
     Used for containers, titles and body text. The backbone of
     every BlackPrint surface. depth-9 is darkest. */
  --depth-9: #2F2F2F;   /* darkest container / primary text on light */
  --depth-8: #383838;
  --depth-7: #484848;
  --depth-6: #646669;
  --depth-5: #8D9398;
  --depth-3: #B7BCC0;
  --depth-1: #D7DCE0;   /* lightest container / hairlines */
  --on-secondary: #231F20;  /* near-black — text on light, never pure #000 */
  --on-primary: #FFFFFF;    /* pure white — text on dark */

  /* Transparent depth-9 (scrims, overlays on the map) */
  --depth-9-25: rgba(47,47,47,0.25);
  --depth-9-50: rgba(47,47,47,0.5);
  --depth-9-75: rgba(47,47,47,0.75);
  --on-primary-25: rgba(255,255,255,0.25);
  --on-primary-50: rgba(255,255,255,0.5);
  --on-primary-75: rgba(255,255,255,0.75);

  /* --- Set 2 · Accents --------------------------------------
     Key elements, brand accents, links. "h" = highlight (light),
     "p" = primary (saturated). */
  --blue-h: #52BCF5;
  --blue-p: #0875E3;   /* default link / primary action accent */
  --pink-h: #FF9E9E;
  --pink-p: #FE2B7C;
  --blue-p-50: rgba(8,117,227,0.5);
  --pink-h-50: rgba(255,158,158,0.5);

  /* Semantic status accents (interface) */
  --status-green: #0CA036;
  --status-green-bg: #D4F8B7;
  --status-red: #AA2009;
  --status-red-bg: #FA8B8B;
  --status-yellow: #FFD190;

  /* --- Set 3 · Map labels -----------------------------------
     Visual cues, map elements, location pins, data-graph labels. */
  --map-turquoise: #00BCD4;
  --map-lavender:  #A8B0F2;
  --map-purple:    #7E57C2;
  --map-blue:      #6176F8;
  --map-lime:      #C0CA33;
  --map-green:     #43A047;
  --map-yellow:    #FBC02D;
  --map-orange:    #FF6F61;
  --map-red:       #FF4F4F;
  --map-gray:      var(--depth-3);

  /* --- Set 4 · Magnitudes -----------------------------------
     Granular sense of number magnitude. Green = better/higher,
     orange/red = worse/lower. Also used for SES + traffic levels. */
  --mag-ab:      #67AC5C;   /* best */
  --mag-c-plus:  #98C15C;
  --mag-c:       #D1DA59;
  --mag-c-minus: #FDEA60;
  --mag-d-plus:  #F7C244;
  --mag-d:       #F29C38;
  --mag-e:       #ED6337;   /* worst */
  --mag-better:  #67AC5C;
  --mag-worse:   #ED6337;

  /* --- Secondary marketing sets (geometry) ------------------ */
  --beige-100: #E2D9D0;
  --beige-80:  #AAA39D;
  --beige-60:  #897F79;
  --navy-80:   #223551;
  --navy-60:   #3E5C76;

  /* --- Rankings (leaderboards, top sites) ------------------- */
  --rank-first:  #FFBB00;
  --rank-second: #F5F5F5;
  --rank-third:  #E27318;
}

/* ============================================================
   SEMANTIC ALIASES — LIGHT (default: print, web, marketing)
   On light surfaces, depth-9 is text and depth-1 is hairline.
   ============================================================ */
:root,
:root[data-theme="light"],
.bp-light {
  --surface-page:      #FFFFFF;
  --surface-card:      #FFFFFF;
  --surface-sunken:    #F5F5F5;
  --surface-inverse:   var(--depth-9);

  --text-primary:      var(--on-secondary);   /* #231F20 */
  --text-secondary:    var(--depth-6);
  --text-tertiary:     var(--depth-5);
  --text-inverse:      var(--on-primary);
  --text-link:         var(--blue-p);

  --border-subtle:     var(--depth-1);
  --border-default:    var(--depth-3);
  --border-strong:     var(--depth-5);

  --accent:            var(--blue-p);
  --accent-alt:        var(--pink-p);
}

/* ============================================================
   SEMANTIC ALIASES — DARK (the Platform product UI)
   The platform lives on near-black map tiles; containers are
   depth-9 → depth-7, text is white → depth-5.
   ============================================================ */
:root[data-theme="dark"],
.bp-dark {
  --surface-page:      var(--depth-9);
  --surface-card:      var(--depth-8);
  --surface-raised:    var(--depth-7);
  --surface-sunken:    #1E1E1E;
  --surface-inverse:   #FFFFFF;

  --text-primary:      var(--on-primary);     /* #FFFFFF */
  --text-secondary:    var(--depth-3);
  --text-tertiary:     var(--depth-5);
  --text-inverse:      var(--on-secondary);
  --text-link:         var(--blue-h);

  --border-subtle:     var(--depth-7);
  --border-default:    var(--depth-6);
  --border-strong:     var(--depth-5);

  --accent:            var(--blue-p);
  --accent-alt:        var(--pink-p);
}