/* ================================================================
   AFK Legion — Color tokens
   Sampled from the real landing page + the Tiny Swords pixel palette.
   Marketing skin = dark NAVY sections, PARCHMENT nav/cards, TEAL
   feature bands, OLIVE-GREEN (lime) call-to-action accent.
   Game skin = teal water + wood/parchment HUD.
   ================================================================ */
:root {
  /* ---- Navy (primary marketing surface) ---- */
  --navy-900: #101a29;   /* deepest — reward tiles, insets */
  --navy-800: #16202f;   /* section background (canonical) */
  --navy-700: #1d2a3d;   /* raised card on navy */
  --navy-600: #26374f;   /* hover / borders */
  --navy-500: #34496a;

  /* ---- Teal / water (feature bands + game) ---- */
  --teal-100: #d4efec;
  --teal-200: #a7ddd8;
  --teal-300: #7ac7c2;
  --teal-400: #47aba9;   /* canonical site teal (sampled) */
  --teal-500: #3f8f8d;
  --teal-600: #2e7574;
  --teal-700: #1f5857;
  --teal-800: #143d3c;
  --teal-water: #5eb2b0; /* the in-game water tile hue */

  /* ---- Parchment / tan (nav, hero card, borders) ---- */
  --parch-50:  #f4ead1;
  --parch-100: #e8cfa6;  /* nav bar / light parchment (sampled) */
  --parch-200: #dcb98a;  /* hero card body (sampled) */
  --parch-300: #d3b391;  /* inset sub-panel (sampled) */
  --parch-400: #c9aa8e;  /* tan border / frame line (sampled) */

  /* ---- Olive-green / lime (the CTA accent) ---- */
  --lime-200: #e3ecb4;
  --lime-300: #d3e08a;
  --lime-400: #c0d470;   /* button + "Limited Time" badge (sampled) */
  --lime-500: #a8bf58;
  --lime-600: #879a3f;   /* green text on parchment */

  /* ---- Wood (game frames, bevels) ---- */
  --wood-300: #d69a5a;
  --wood-400: #b5763a;
  --wood-500: #955c28;
  --wood-600: #6f421a;
  --wood-700: #4c2c12;

  /* ---- Stone / grass (world) ---- */
  --stone-300: #8fa6b8;
  --stone-400: #5b7a99;
  --stone-500: #46617d;
  --stone-teal: #6d9a9c;
  --grass-300: #c3dd6a;
  --grass-400: #a9c94a;
  --grass-500: #6b9a3f;
  --grass-600: #47702f;
  --grass-700: #2f4f2a;

  /* ---- Gold (currency / secondary accent) ---- */
  --gold-300: #ffe27a;
  --gold-400: #ffd23f;
  --gold-500: #f5b81e;
  --gold-600: #d9931a;
  --gold-700: #a8690f;

  /* ---- Heraldry ---- */
  --heraldry-blue: #3b6ea5;
  --heraldry-red:  #c8452f;

  /* ---- Ink (warm near-black text/outlines) ---- */
  --ink-900: #241d24;
  --ink-800: #362b34;
  --ink-700: #4d3f49;
  --ink-500: #7a6b74;
  --ink-300: #b3a59c;

  /* ================================================================
     Semantic aliases — use THESE in components
     ================================================================ */

  /* Marketing backgrounds */
  --bg-page:        var(--navy-800);   /* default dark section */
  --bg-page-deep:   var(--navy-900);
  --bg-band-teal:   var(--teal-400);   /* teal feature band */
  --bg-nav:         var(--parch-100);  /* parchment nav bar */

  /* Surfaces */
  --surface-panel:  var(--parch-200);  /* parchment hero/menu card */
  --surface-inset:  var(--parch-300);  /* sub-panel inside a card */
  --surface-raised: var(--parch-50);
  --surface-card:   var(--navy-700);   /* dark feature card on navy */
  --surface-card-deep: var(--navy-900);/* reward tile */
  --surface-slot:   var(--wood-700);   /* dark inventory slot */

  /* Borders */
  --frame-outer:    var(--ink-900);    /* crisp black keyline */
  --border-tan:     var(--parch-400);  /* tan card border (marketing) */
  --border-tan-deep:#b08f6e;
  --frame-wood:     var(--wood-500);
  --frame-wood-dark:var(--wood-700);

  /* Text */
  --text-strong:    var(--ink-900);    /* on parchment */
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-on-navy:   #eadfc9;           /* parchment-white on navy */
  --text-on-navy-muted: #9b9488;
  --text-on-wood:   var(--parch-50);
  --text-on-teal:   #ffffff;
  --text-accent:    var(--lime-600);   /* green label on parchment */
  --text-gold:      var(--gold-600);

  /* Interactive — primary CTA is the lime/parchment button */
  --accent:        var(--lime-400);
  --accent-hover:  var(--lime-300);
  --accent-press:  var(--lime-500);
  --accent-text:   var(--navy-900);
  --action:        var(--teal-400);
  --action-hover:  var(--teal-300);
  --action-press:  var(--teal-500);

  /* Status */
  --success: var(--grass-500);
  --danger:  var(--heraldry-red);
  --info:    var(--heraldry-blue);
  --warning: var(--gold-500);

  /* Resource colors */
  --res-gold:  var(--gold-500);
  --res-wood:  var(--wood-400);
  --res-food:  var(--grass-500);
  --res-mana:  var(--heraldry-blue);
}