/* ============================================================
   Legion Comps — Color System
   Direction: clean off-white canvas, dark navy accent panels,
   imperial gold as accent (not atmosphere), crimson as the
   action color. WCAG AA targeted on all text pairings.
   ============================================================ */

:root {
  /* ---- Paper neutrals (the light canvas — traditional off-whites) ---- */
  --paper-0:    #ffffff;   /* card surface */
  --paper-50:   #fafaf7;   /* raised / hover fill */
  --paper-100:  #f3f3ef;   /* page background — clean off-white (eggshell) */
  --paper-200:  #e9e8e1;   /* subtle fills, table stripes */
  --paper-300:  #d9d6cd;   /* default border on light */
  --paper-400:  #c2bfb4;   /* stronger border / divider */

  /* ---- Ink (dark text & marks on light) ---- */
  --ink-900:    #191820;   /* headings / Cinzel display */
  --ink-800:    #26252f;
  --ink-700:    #34333f;   /* strong body */
  --ink-600:    #4c4b57;   /* body */
  --ink-500:    #6a6873;   /* secondary text */
  --ink-400:    #8d8a95;   /* muted / captions */
  --ink-300:    #b3afb8;   /* faint / disabled */

  /* ---- Slate (dark navy/charcoal accent panels) ---- */
  --slate-950:  #101019;   /* deepest — footer base */
  --slate-900:  #16161f;   /* hero / dark panel */
  --slate-850:  #1b1c27;   /* dark panel raised */
  --slate-800:  #23242f;   /* dark card / elevated-on-dark */
  --slate-700:  #2e3040;   /* border on dark */
  --slate-600:  #3e4054;   /* stronger border on dark */

  /* text & marks that sit ON dark panels */
  --on-dark-hi:    #f3f5f8;  /* clean cool white — headings on dark */
  --on-dark:       #ced3db;  /* body on dark (cool grey) */
  --on-dark-mut:   #9ea3ad;  /* muted on dark */
  --on-dark-faint: #71757f;  /* faint on dark */

  /* ---- Imperial gold (accent: CTAs, key numbers, highlights) ---- */
  --gold-800:   #7c6322;
  --gold-700:   #9a7b2e;   /* gold text on light — AA on paper */
  --gold-600:   #b8902f;
  --gold-500:   #d4af37;   /* primary metallic gold */
  --gold-400:   #e2c265;   /* gold on dark / highlights */
  --gold-300:   #efd58e;
  --gold-100:   #f6eccf;   /* gold tint fill on light */
  --gold-tint:  rgba(212, 175, 55, 0.10);

  /* ---- Crimson (the action color) ---- */
  --crimson-800: #7c1322;
  --crimson-700: #98182b;  /* crimson text on light — AA */
  --crimson-600: #b81e32;
  --crimson-500: #c8233b;  /* primary button */
  --crimson-400: #dd4a5e;  /* crimson on dark / hover-light */
  --crimson-100: #f7e2e4;  /* crimson tint fill */
  --crimson-tint: rgba(200, 35, 59, 0.09);

  /* ---- Semantic ---- */
  --success-700: #1f7a4d;  /* text on light */
  --success-500: #2f9e63;
  --success-400: #57c489;  /* on dark */
  --success-tint: rgba(47, 158, 99, 0.12);

  --warning-700: #9a6a16;
  --warning-500: #d99425;
  --warning-tint: rgba(217, 148, 37, 0.13);

  --danger-700:  #98182b;
  --danger-500:  #c8233b;
  --danger-tint: rgba(200, 35, 59, 0.10);

  /* arcane violet — reserved for instant-win only, muted & deliberate */
  --arcane-700:  #574baa;  /* text on light */
  --arcane-500:  #6a5bc2;
  --arcane-400:  #8e80d6;  /* on dark */
  --arcane-tint: rgba(106, 91, 194, 0.12);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* surfaces */
  --surface-page:       var(--paper-100);
  --surface-card:       var(--paper-0);
  --surface-raised:     var(--paper-50);
  --surface-sunken:     var(--paper-200);
  --surface-dark:       var(--slate-900);   /* hero / footer / accent panel */
  --surface-dark-card:  var(--slate-800);   /* selected feature card on dark */

  /* borders */
  --border-soft:        var(--paper-300);
  --border-strong:      var(--paper-400);
  --border-dark:        var(--slate-700);
  --border-dark-strong: var(--slate-600);

  /* text on light */
  --text-display:    var(--ink-900);
  --text-heading:    var(--ink-800);
  --text-body:       var(--ink-600);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-400);
  --text-disabled:   var(--ink-300);

  /* text on dark */
  --text-on-dark:        var(--on-dark-hi);
  --text-on-dark-body:   var(--on-dark);
  --text-on-dark-muted:  var(--on-dark-mut);
  --on-dark-body:        var(--on-dark);

  /* accents */
  --accent-gold:        var(--gold-500);
  --accent-gold-ink:    var(--gold-700);   /* gold text on light, AA */
  --accent-gold-on-dark:var(--gold-400);
  --accent-action:      var(--crimson-500);
  --accent-action-ink:  var(--crimson-700);

  /* focus ring */
  --focus-ring:      var(--gold-600);
  --focus-ring-dark: var(--gold-400);
}