/* ============================================================
   hammerjack — Color tokens
   "Bold, warm, and welcoming, with enough contrast to feel
    confident and clear." Primary leads; secondary adds play.
   ============================================================ */
:root {
  /* ---- Brand primaries ---- */
  --hj-orange: #FE6000;   /* Vivid Orange — the signature */
  --hj-navy:   #0A243F;   /* Navy Blue   — depth & text   */
  --hj-white:  #F1F1F1;   /* Anti-Flash White — soft surface */
  --hj-pure-white: #FFFFFF;

  /* ---- Brand secondaries (flexibility & play) ---- */
  --hj-periwinkle: #969DF8;
  --hj-sky:        #B0E9F8;

  /* ---- Orange tints (brand "tints" = reduced opacity over white) ---- */
  --hj-orange-75: #FE8840;
  --hj-orange-50: #FEAF80;
  --hj-orange-25: #FFD7BF;
  --hj-orange-08: #FFF0E6;   /* faint wash for section fills */

  /* ---- Navy tints ---- */
  --hj-navy-75: #476988;
  --hj-navy-50: #84919F;
  --hj-navy-25: #C2C8CF;
  --hj-navy-08: #EDEFF2;

  /* ---- Periwinkle / Sky tints ---- */
  --hj-periwinkle-50: #CBCEFB;
  --hj-periwinkle-25: #E5E7FD;
  --hj-sky-50: #D7F4FB;
  --hj-sky-25: #EBFAFD;

  /* ---- Neutrals ---- */
  --hj-ink:    #0A243F;   /* default text = navy */
  --hj-gray-700: #3A4A5C;
  --hj-gray-500: #66717E;
  --hj-gray-300: #C7CDD3;
  --hj-gray-200: #E3E6E9;
  --hj-gray-100: #F1F1F1;
  --hj-line:   #DDE2E7;

  /* ---- Semantic aliases ---- */
  --color-accent:        var(--hj-orange);
  --color-accent-hover:  #E85700;   /* darker orange for hover */
  --color-accent-press:  #CC4D00;
  --color-on-accent:     #FFFFFF;

  --text-strong:   var(--hj-navy);
  --text-body:     var(--hj-gray-700);
  --text-muted:    var(--hj-gray-500);
  --text-on-dark:  #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,0.72);

  --surface-page:   #FFFFFF;
  --surface-subtle: var(--hj-white);
  --surface-card:   #FFFFFF;
  --surface-navy:   var(--hj-navy);
  --surface-orange: var(--hj-orange);

  --border-subtle: var(--hj-line);
  --border-strong: var(--hj-navy-25);

  --focus-ring: rgba(254,96,0,0.45);
}