/* ============================================================
   CRUST News — COLOR TOKENS
   Light mode = white palette. Dark mode = near-black palette.
   Both share the signature CRUST red and the categorical data
   palette. Toggle dark via  [data-theme="dark"]  or  .theme-dark
   ============================================================ */

:root {
  /* ---- Base palette (raw values, theme-agnostic) ---- */
  --cn-ink:        #0D0D0D;   /* near-black text on white            */
  --cn-black:      #080C12;   /* dark canvas — desaturated navy-black */
  --cn-black-2:    #11151C;   /* raised surface on dark              */
  --cn-black-3:    #1A1F28;   /* hairline / divider on dark          */
  --cn-cream:      #F6F1EA;   /* warm cream — display text on dark   */
  --cn-cream-dim:  #DAD5CC;   /* secondary cream                     */
  --cn-white:      #FFFFFF;
  --cn-paper:      #FAF9F6;   /* off-white page tint                 */

  /* ---- Signature red ---- */
  --cn-red:        #E2231A;   /* the dot, rules, live/breaking accent */
  --cn-red-hover:  #C71912;
  --cn-red-press:  #A81009;
  --cn-red-tint:   #FBE7E5;   /* faint red wash (light mode)          */

  /* ---- Neutral ramp (cool gray, tuned to the navy-black) ---- */
  --cn-gray-50:   #F4F5F6;
  --cn-gray-100:  #E9EAEC;
  --cn-gray-200:  #DCDEE1;
  --cn-gray-300:  #C4C7CC;
  --cn-gray-400:  #9CA1A8;
  --cn-gray-500:  #6E747C;
  --cn-gray-600:  #4E535A;
  --cn-gray-700:  #353A41;
  --cn-gray-800:  #21262D;
  --cn-gray-900:  #14181E;

  /* ---- Categorical palette (network / data viz, from the brand) ---- */
  --cn-cat-gray:    #8B8E92;  /* corporate / shell        */
  --cn-cat-blue:    #1F6E8B;  /* procurement / defense    */
  --cn-cat-maroon:  #9B2D1E;  /* enforcement / political  */
  --cn-cat-purple:  #7A3D9E;  /* family / backing         */

  /* ---- Spectrum bar (section spectrum / topic rail) ---- */
  --cn-spec-red:    #E22720;
  --cn-spec-orange: #E98A2B;
  --cn-spec-yellow: #F2C840;
  --cn-spec-green:  #309F44;
  --cn-spec-blue:   #2E6FB0;
  --cn-spec-purple: #7A3D9E;

  /* ===========================================================
     SEMANTIC ALIASES — LIGHT MODE (default, white palette)
     =========================================================== */
  --bg:            var(--cn-white);
  --surface:       var(--cn-white);
  --surface-2:     var(--cn-paper);
  --surface-sunk:  var(--cn-gray-50);
  --surface-inverse: var(--cn-black);

  --text:          var(--cn-ink);
  --text-strong:   #000000;
  --text-muted:    var(--cn-gray-600);
  --text-subtle:   var(--cn-gray-500);
  --text-inverse:  var(--cn-cream);
  --text-on-accent: var(--cn-white);

  --border:        var(--cn-gray-200);
  --border-strong: var(--cn-gray-300);
  --border-ink:    var(--cn-ink);
  --hairline:      var(--cn-gray-100);

  --accent:        var(--cn-red);
  --accent-hover:  var(--cn-red-hover);
  --accent-press:  var(--cn-red-press);
  --accent-wash:   var(--cn-red-tint);

  --kicker:        var(--cn-red);
  --link:          var(--cn-ink);
  --link-hover:    var(--cn-red);
  --focus-ring:    var(--cn-red);

  color-scheme: light;
}

/* ===========================================================
   SEMANTIC ALIASES — DARK MODE (black palette)
   =========================================================== */
[data-theme="dark"],
.theme-dark {
  --bg:            var(--cn-black);
  --surface:       var(--cn-black-2);
  --surface-2:     var(--cn-black-3);
  --surface-sunk:  #0B0E14;
  --surface-inverse: var(--cn-cream);

  --text:          var(--cn-cream);
  --text-strong:   #FFFFFF;
  --text-muted:    #9AA0A8;
  --text-subtle:   #6E747C;
  --text-inverse:  var(--cn-ink);
  --text-on-accent: var(--cn-white);

  --border:        rgba(246, 241, 234, 0.14);
  --border-strong: rgba(246, 241, 234, 0.28);
  --border-ink:    var(--cn-cream);
  --hairline:      rgba(246, 241, 234, 0.08);

  --accent:        var(--cn-red);
  --accent-hover:  #F0473F;
  --accent-press:  var(--cn-red-hover);
  --accent-wash:   rgba(226, 35, 26, 0.16);

  --kicker:        var(--cn-red);
  --link:          var(--cn-cream);
  --link-hover:    #F0473F;
  --focus-ring:    #F0473F;

  color-scheme: dark;
}