/* ============================================================
   Tenacious J Carriers — Color tokens
   Palette: black + white + a jolt of lime green. Industrial,
   honest, working-class. Green is the ONLY accent — use it
   sparingly and with confidence (highlights, outlines, bolts).
   ============================================================ */
:root {
  /* ---- Brand greens ---------------------------------------- */
  --tj-green:        #00ff00; /* lime — the literal brand accent: highlights, button insets, icon fills */
  --tj-green-logo:   #3df23d; /* slightly softer green of the logo outline / glow */
  --tj-green-deep:   #007b41; /* deep green — green text / icons on light surfaces */

  /* ---- Core neutrals --------------------------------------- */
  --tj-black:        #000000;
  --tj-ink:          #07090d; /* footer / near-black surfaces */
  --tj-white:        #ffffff;

  /* ---- Neutral / gray scale -------------------------------- */
  --tj-gray-50:      #f7f8f8;
  --tj-gray-100:     #f5f5f6;
  --tj-gray-200:     #e6e6e7;
  --tj-gray-300:     #cdced5; /* the signature section-background gray */
  --tj-gray-400:     #acb4c3;
  --tj-gray-500:     #59595f;
  --tj-gray-600:     #4b5563;
  --tj-gray-700:     #252527;
  --tj-gray-900:     #07090d;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  /* surfaces */
  --surface-page:     var(--tj-white);
  --surface-muted:    var(--tj-gray-300); /* alternating gray sections */
  --surface-subtle:   var(--tj-gray-50);
  --surface-card:     var(--tj-white);
  --surface-inverse:  var(--tj-ink);      /* footer, dark blocks */
  --surface-field:    var(--tj-gray-100);

  /* text */
  --text-strong:      var(--tj-black);
  --text-body:        var(--tj-gray-700);
  --text-muted:       var(--tj-gray-500);
  --text-on-dark:     var(--tj-white);
  --text-on-dark-dim: var(--tj-gray-400);
  --text-accent:      var(--tj-green-deep);

  /* lines & borders */
  --border-ink:       var(--tj-black);     /* the 2px hard outline on images/avatars */
  --border-subtle:    var(--tj-gray-200);
  --border-field:     var(--tj-gray-200);

  /* accent */
  --accent:           var(--tj-green);
  --accent-ink:       var(--tj-black);     /* foreground that sits on accent */
  --focus-ring:       var(--tj-green);
}