/* ─────────────────────────────────────────────────────────
   Joy Ann Llamas — Color tokens
   Black-and-gold foundation, soft neutrals for long-form content.
   Source: Brand Database v1, §07 Color palette.
   ───────────────────────────────────────────────────────── */

:root {
  /* ---- Base values — primary (premium foundation, ~60/20/10/10) ---- */
  --jal-ink:            #151513;  /* Signature Black — anchor / logo bg */
  --jal-charcoal:       #1E1E1C;  /* Rich Charcoal — dark surfaces / cards */
  --jal-bronze:         #5A431D;  /* Warm Bronze — accent, italics, deep gold */
  --jal-gold:           #C6A85C;  /* Luxury Gold — hairlines, CTAs, dividers */
  --jal-gold-bright:    #E5CC74; /* Champagne Gold — highlights only, use sparingly */
  --jal-champagne:      #F7EDA2;  /* lightest gold, glyph/logo highlight */

  /* ---- Base values — supporting (long-form & social) ---- */
  --jal-ivory:          #F7F5EF;  /* Ivory — base light background */
  --jal-warm-white:     #FAF8F3;  /* Warm White — light cards/surfaces */
  --jal-beige:          #D8CBB7;  /* Soft Beige — quiet panels */
  --jal-taupe:          #B5A58D;  /* Soft Taupe — hairlines, dividers on light */

  /* ---- Derived / on-dark text ---- */
  --jal-text-on-dark:      #EFEADD;
  --jal-muted-on-dark:     #9E9684;
  --jal-line-on-dark:      rgba(198,168,92,.16);
  --jal-line-on-dark-2:    rgba(198,168,92,.30);

  /* ---- Derived / on-light text ---- */
  --jal-text-on-light:     #2A2620;
  --jal-muted-on-light:    #7A6F5C;
  --jal-line-on-light:     rgba(90,67,29,.16);

  /* ---- Semantic aliases — dark surface (hero / logo / cover contexts) ---- */
  --surface-dark:          var(--jal-ink);
  --surface-dark-raised:   var(--jal-charcoal);
  --text-on-surface-dark:  var(--jal-text-on-dark);
  --text-muted-on-dark:    var(--jal-muted-on-dark);
  --border-on-dark:        var(--jal-line-on-dark);
  --border-on-dark-strong: var(--jal-line-on-dark-2);

  /* ---- Semantic aliases — light surface (long-form / social / web body) ---- */
  --surface-light:          var(--jal-ivory);
  --surface-card:           var(--jal-warm-white);
  --surface-panel:          var(--jal-beige);
  --text-on-surface-light:  var(--jal-text-on-light);
  --text-muted-on-light:    var(--jal-muted-on-light);
  --border-on-light:        var(--jal-line-on-light);

  /* ---- Semantic aliases — accent / action ---- */
  --accent:            var(--jal-gold);
  --accent-strong:     var(--jal-bronze);
  --accent-highlight:  var(--jal-gold-bright);
  --focus-ring:        var(--jal-gold);

  /* ---- Semantic aliases — state ---- */
  --warn: #C97F5D;
}