/* ============================================================
   HEROBOTS · Color tokens
   Black-dominant, premium, Apple-inspired. One hot accent: #FF4D00.
   ============================================================ */
:root {
  /* ---- Brand accent (official) ---- */
  --hb-orange:        #FF4D00;   /* official accent — CTAs, focal details */
  --hb-orange-bright: #FA5600;   /* alt bright orange */
  --hb-orange-soft:   #FF7B42;   /* lighter stroke / hover glow edge */
  --hb-orange-mid:    #B64C1F;   /* burnt mid (gradient stop) */
  --hb-orange-deep:   #50210D;   /* deep ember (gradient base) */
  --hb-orange-text:   #EA713D;   /* orange used as running text on dark */

  /* ---- Ink / neutrals (true neutral grays) ---- */
  --hb-black:    #000000;   /* dominant background */
  --hb-ink-900:  #101010;   /* near-black raised surface */
  --hb-ink-850:  #161616;
  --hb-ink-800:  #212121;   /* card / panel on black */
  --hb-ink-750:  #222222;
  --hb-ink-700:  #2A2A2A;   /* hairline-lit surface, borders */
  --hb-ink-600:  #3A3A3A;
  --hb-gray-500: #8F8F8F;   /* dim label on dark */
  --hb-gray-400: #AFAFAF;   /* muted / secondary text */
  --hb-gray-300: #D9D9D9;   /* divider on light, faint fill */
  --hb-gray-200: #E7E7E7;
  --hb-gray-150: #ECECEC;   /* logo light ink */
  --hb-gray-100: #F0F0F0;
  --hb-off-white:#FAFAFA;   /* the "light page" background */
  --hb-white:    #FFFFFF;

  /* ---- Technical / niche ---- */
  --hb-olive-900:#22241C;   /* deep technical olive-black (rare) */

  /* ---- Semantic aliases — DARK is the canonical theme ---- */
  --bg:               var(--hb-black);
  --bg-raised:        var(--hb-ink-850);
  --surface-card:     var(--hb-ink-800);
  --surface-hover:    var(--hb-ink-700);
  --border-subtle:    rgba(255,255,255,0.10);
  --border-strong:    rgba(255,255,255,0.22);
  --border-accent:    var(--hb-orange);

  --text-primary:     var(--hb-white);
  --text-secondary:   var(--hb-gray-400);
  --text-tertiary:    var(--hb-gray-500);
  --text-on-accent:   var(--hb-white);
  --accent:           var(--hb-orange);

  /* Focus ring */
  --focus-ring:       0 0 0 2px var(--hb-black), 0 0 0 4px var(--hb-orange); /* @kind shadow */

  /* The signature "glass capsule" radial used on the logo lockup */
  --glass-ember: radial-gradient(96px 51px at 50% 50%,
                  rgba(80,33,13,0.30) 7%,
                  rgba(182,76,31,0.30) 72%,
                  rgba(255,77,0,0.30) 100%) /* @kind other */;
}

/* Light surface scope — for the few off-white pages (datasheets, index). */
.hb-on-light {
  --bg:             var(--hb-off-white);
  --surface-card:   var(--hb-white);
  --surface-hover:  var(--hb-gray-100);
  --border-subtle:  rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.20);
  --text-primary:   var(--hb-black);
  --text-secondary: #5A5A5A;
  --text-tertiary:  var(--hb-gray-500);
  --focus-ring:     0 0 0 2px var(--hb-white), 0 0 0 4px var(--hb-orange);
}