/* ============================================================
   ELDEN FORGE — Color tokens
   A dark molten-forge palette: charred backgrounds, beaten-gold
   structure, a fire ramp (ember → lava → red), plus a blue
   "mithril crystal" accent and a green "banked/handled" success.
   ============================================================ */
:root {
  /* ---- Charcoal / forge backgrounds (darkest → lightest) ---- */
  --coal-900: #050201;   /* deepest void, page vignette base */
  --coal-800: #080402;   /* app background */
  --coal-700: #0d0705;   /* coal */
  --coal-600: #160904;    /* secondary background, brand bar */
  --ash-700:  #1a0d05;   /* panel base */
  --ash-600:  #241409;   /* panel raised */
  --ash-500:  #261205;   /* panel highlight */
  --ash-400:  #3c2210;   /* ghost button fill */

  /* ---- Beaten gold (structure, type, borders) ---- */
  --gold-500: #f1c34a;   /* primary gold — KPI values, headings */
  --gold-400: #f4b53c;   /* gold alt (game display) */
  --gold-300: #ffe38b;   /* bright gold — titles, hovered text */
  --gold-200: #ffd24a;   /* ember-hot gold highlight */
  --gold-700: #b9781d;   /* deep gold — gradient base */
  --gold-edge:#946315;   /* metallic edge line */

  /* ---- Fire ramp (heat / action / danger) ---- */
  --ember-500: #e85518;  /* ember orange — primary fire accent */
  --ember-400: #ff7a1a;  /* hot ember */
  --ember-300: #ff8f18;  /* flame mid */
  --lava-500:  #ff4d12;  /* lava */
  --red-500:   #cc2808;  /* danger / "torch it" red */
  --red-400:   #e0452a;  /* danger alt */

  /* ---- Mithril crystal blue (info, deep/nightmare accent) ---- */
  --mithril-500: #4a74ff; /* electric blue */
  --mithril-400: #8fbfff; /* frost blue (lightning) */
  --mithril-300: #bedcff; /* pale crystal */
  --mithril-700: #2a3a8f; /* deep crystal */

  /* ---- Forge green (banked, paid, handled, success) ---- */
  --green-500: #41b76e;
  --green-400: #8bdc60;
  --green-300: #b8ff9d;
  --green-700: #1a6a35;

  /* ---- Nightmare purple (deep-forge haunted tint) ---- */
  --purple-700: #291a38;
  --purple-500: #62207e;

  /* ---- Text / ink ---- */
  --ink-100: #fff3d2;    /* primary parchment text */
  --ink-200: #f6e4cf;    /* warm ink (game) */
  --ink-300: #c7a988;    /* dim ink */
  --ink-400: #a87539;    /* muted gold-brown — labels */
  --ink-500: #8e6c39;    /* faint sub-label */

  /* ---- Hairlines ---- */
  --line-strong: #5a2b10; /* primary forge border */
  --line-gold:   rgba(241,195,74,.35); /* gold hairline */
  --line-soft:   rgba(136,75,27,.75);  /* warm panel border */
  --line-faint:  rgba(90,43,16,.55);   /* faint divider */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg-app:        var(--coal-800);
  --bg-app-2:      var(--coal-600);
  --surface-panel: var(--ash-700);
  --surface-card:  var(--ash-600);
  --surface-ghost: var(--ash-400);

  --text-primary:  var(--ink-100);
  --text-heading:  var(--gold-300);
  --text-value:    var(--gold-500);
  --text-muted:    var(--ink-400);
  --text-faint:    var(--ink-500);
  --text-on-gold:  #220d03;
  --text-on-ember: #fff0e2;

  --accent:        var(--gold-500);
  --accent-bright: var(--gold-300);
  --heat:          var(--ember-500);
  --heat-hot:      var(--ember-400);
  --danger:        var(--red-500);
  --info:          var(--mithril-500);
  --success:       var(--green-500);

  --border:        var(--line-strong);
  --border-gold:   var(--line-gold);
  --border-soft:   var(--line-soft);
}