/* ============================================================
   John Jeff — Color tokens
   Source: JJH001 Brand Guidelines (3.0 Color)
   ------------------------------------------------------------
   Deepcut Purple + Hazy Lilac are the PRIMARY brand colors.
   Deepcut & Bone are the workhorse backgrounds; Hazy Lilac for
   a lighter vibe. Ashwood / Acid Lime / Bloodrush used SPARINGLY
   — Bloodrush only to accentuate type or tiny eye-catching details.
   Bone replaces pure white for legibility.
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---- */
  --jj-deepcut:    #1C0B29; /* Deepcut Purple — primary / dark bg   */
  --jj-lilac:      #AEADEA; /* Hazy Lilac      — primary / light vibe */
  --jj-bone:       #F4F1EF; /* Bone            — bg in place of white */
  --jj-ashwood:    #413A2B; /* Ashwood         — warm neutral, sparing */
  --jj-acid:       #B6C544; /* Acid Lime       — accent, sparing       */
  --jj-bloodrush:  #D82118; /* Bloodrush       — type accent only      */

  /* ---- Tints & shades (derived, harmonious) ---- */
  --jj-deepcut-90: #2E1A40; /* raised surface on dark */
  --jj-deepcut-80: #43295A; /* hairline / border on dark */
  --jj-lilac-40:   #E4E3F6; /* lilac wash */
  --jj-lilac-70:   #C7C6F0; /* lilac soft */
  --jj-bone-dim:   #E9E4E0; /* bone, one step down — cards / wells */
  --jj-bone-edge:  #DCD5CF; /* bone hairline / border */
  --jj-ashwood-60: rgba(65, 58, 43, 0.6);
  --jj-acid-deep:  #94A02F; /* acid lime, darkened for text on bone (AA) */
  --jj-bloodrush-deep: #B81C14; /* pressed bloodrush */

  /* ---- Semantic: surfaces ---- */
  --surface-page:        var(--jj-bone);     /* default light page    */
  --surface-card:        #FFFFFF;            /* card lift over bone    */
  --surface-well:        var(--jj-bone-dim); /* inset / muted block    */
  --surface-page-dark:   var(--jj-deepcut);  /* hero / dark page       */
  --surface-card-dark:   var(--jj-deepcut-90);
  --surface-lilac:       var(--jj-lilac);    /* lilac feature block    */

  /* ---- Semantic: text ---- */
  --text-strong:    var(--jj-deepcut);   /* headlines on light       */
  --text-body:      #2A2230;             /* body on light (deepcut-leaning ink) */
  --text-muted:     var(--jj-ashwood-60);/* captions / meta on light */
  --text-on-dark:   var(--jj-bone);      /* body on deepcut          */
  --text-on-dark-muted: rgba(244,241,239,0.66);
  --text-accent:    var(--jj-bloodrush); /* emphasis only            */
  --text-link:      var(--jj-deepcut);

  /* ---- Semantic: lines & borders ---- */
  --border-light:   var(--jj-bone-edge);
  --border-dark:    var(--jj-deepcut-80);
  --rule-emphasis:  var(--jj-bloodrush);  /* hand-drawn underline */

  /* ---- Semantic: interactive accents ---- */
  --accent:           var(--jj-acid);       /* primary action on dark */
  --accent-text-on:   var(--jj-deepcut);    /* text atop acid lime    */
  --accent-ink:       var(--jj-acid-deep);  /* acid lime as text/link on bone */
  --focus-ring:       var(--jj-lilac);
}