/* ============================================================
   GRIMOIRE · D&D Character Tracker · Design Tokens
   Dark walnut + warm vellum + brass-gold accent
   ============================================================ */

:root {
  /* === SURFACES (warm dark, low-saturation) === */
  --bg-0:   #0a0907;   /* page bg — deeper */
  --bg-1:   #1b1611;   /* card */
  --bg-2:   #251f17;   /* nested */
  --bg-3:   #2e2820;   /* input */
  --bg-4:   #3a3324;
  --bg-elv: #221c14;   /* elevated (modal, overlay) */

  /* === INKS === */
  --ink-0:  #f4ecd6;   /* primary text */
  --ink-1:  #cfc3a3;   /* secondary */
  --ink-2:  #918672;   /* tertiary */
  --ink-3:  #6b6253;   /* muted */
  --ink-4:  #4a4337;   /* very muted */

  /* === BORDERS === */
  --line-0: rgba(244, 236, 214, 0.08);
  --line-1: rgba(244, 236, 214, 0.13);
  --line-2: rgba(244, 236, 214, 0.22);

  /* === ACCENTS === */
  --gold-0: #d4a857;       /* primary */
  --gold-1: #efc97a;       /* highlight */
  --gold-2: #b88a3e;       /* depth */
  --gold-glow: rgba(212, 168, 87, 0.35);
  --gold-soft: rgba(212, 168, 87, 0.10);

  --crimson:    #c43d3d;
  --crimson-1:  #e85f5f;
  --crimson-soft: rgba(196, 61, 61, 0.16);

  --emerald:    #5b9c5e;
  --emerald-1:  #82c285;
  --emerald-soft: rgba(91, 156, 94, 0.16);

  --azure:      #4a7fc9;
  --azure-1:    #7aa8e8;
  --azure-soft: rgba(74, 127, 201, 0.18);

  --violet:     #7e5fc9;
  --violet-1:   #a585e8;
  --violet-soft: rgba(126, 95, 201, 0.18);

  --copper:     #c97d4a;
  --silver:     #c7c3b8;
  --platinum:   #e0deca;

  /* === TYPOGRAPHY === */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-script:  'Cormorant Garamond', 'Cinzel', serif;

  /* === SCALE === */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;

  --shadow-1: 0 1px 0 rgba(244, 236, 214, 0.04) inset, 0 2px 6px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(244, 236, 214, 0.05) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 0 1px var(--gold-2), 0 0 16px var(--gold-glow);
  --inset-line: inset 0 0 0 1px var(--line-1);
}

/* ============================================================
   THEME · PARCHMENT (vellum / light)
   ============================================================ */
[data-theme="vellum"] {
  --bg-0:   #ecdfb8;
  --bg-1:   #f3e8c4;
  --bg-2:   #ead9aa;
  --bg-3:   #dbc996;
  --bg-4:   #ccb27a;
  --bg-elv: #f7ecc8;

  --ink-0:  #2b1f10;
  --ink-1:  #54401e;
  --ink-2:  #806439;
  --ink-3:  #a08561;
  --ink-4:  #b9a07b;

  --line-0: rgba(43, 31, 16, 0.08);
  --line-1: rgba(43, 31, 16, 0.16);
  --line-2: rgba(43, 31, 16, 0.28);

  --gold-0: #8a5e1f;
  --gold-1: #6f4815;
  --gold-2: #a07127;
  --gold-glow: rgba(138, 94, 31, 0.30);
  --gold-soft: rgba(138, 94, 31, 0.10);

  --crimson:    #913030;
  --crimson-1:  #b04848;
  --crimson-soft: rgba(145, 48, 48, 0.14);

  --emerald:    #3f6b41;
  --emerald-soft: rgba(63, 107, 65, 0.12);

  --azure:      #2e5d96;
  --azure-soft: rgba(46, 93, 150, 0.14);

  --violet:     #5a3f96;
  --violet-soft: rgba(90, 63, 150, 0.14);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.4) inset, 0 2px 8px rgba(80,55,20,0.18);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px rgba(80,55,20,0.18);
}

/* ============================================================
   THEME · PALADIN (steel + holy gold + sky)
   ============================================================ */
[data-theme="paladin"] {
  --bg-0:   #0a131e;
  --bg-1:   #142031;
  --bg-2:   #1d2c40;
  --bg-3:   #28394f;
  --bg-4:   #364965;
  --bg-elv: #182539;

  --ink-0:  #f5f1dc;
  --ink-1:  #d6dde8;
  --ink-2:  #9aa3b5;
  --ink-3:  #6e7689;
  --ink-4:  #4f5666;

  --line-0: rgba(245, 241, 220, 0.08);
  --line-1: rgba(245, 241, 220, 0.14);
  --line-2: rgba(245, 241, 220, 0.24);

  --gold-0: #e8d896;
  --gold-1: #f5e9b8;
  --gold-2: #b8a567;
  --gold-glow: rgba(232, 216, 150, 0.40);
  --gold-soft: rgba(232, 216, 150, 0.12);

  --crimson:    #c43d3d;
  --crimson-1:  #e85f5f;
  --crimson-soft: rgba(196, 61, 61, 0.18);

  --emerald:    #6cb86b;
  --emerald-1:  #92d28f;
  --emerald-soft: rgba(108, 184, 107, 0.16);

  --azure:      #6ba6e8;
  --azure-1:    #9bc6f5;
  --azure-soft: rgba(107, 166, 232, 0.22);

  --violet:     #9b8be8;
  --violet-1:   #bcb1f0;
  --violet-soft: rgba(155, 139, 232, 0.18);
}

/* ============================================================
   THEME · NECROMANCER (bone + sickly green + dark violet)
   ============================================================ */
[data-theme="necromancer"] {
  --bg-0:   #07090a;
  --bg-1:   #10130f;
  --bg-2:   #181d17;
  --bg-3:   #1f2520;
  --bg-4:   #2a3128;
  --bg-elv: #131713;

  --ink-0:  #d8d3c0;
  --ink-1:  #adaa97;
  --ink-2:  #7d7a6b;
  --ink-3:  #5a5849;
  --ink-4:  #3e3c30;

  --line-0: rgba(216, 211, 192, 0.06);
  --line-1: rgba(216, 211, 192, 0.12);
  --line-2: rgba(216, 211, 192, 0.20);

  --gold-0: #8bb784;        /* sickly green as the new "gold" */
  --gold-1: #b2d5ac;
  --gold-2: #5e8a59;
  --gold-glow: rgba(139, 183, 132, 0.36);
  --gold-soft: rgba(139, 183, 132, 0.12);

  --crimson:    #a8294a;
  --crimson-1:  #d04f6c;
  --crimson-soft: rgba(168, 41, 74, 0.20);

  --emerald:    #8bb784;
  --emerald-1:  #b2d5ac;
  --emerald-soft: rgba(139, 183, 132, 0.16);

  --azure:      #5e7a82;
  --azure-soft: rgba(94, 122, 130, 0.18);

  --violet:     #9572c9;
  --violet-1:   #b9a0e0;
  --violet-soft: rgba(149, 114, 201, 0.22);
}

/* ============================================================
   THEME · LIGHT (clean modern, low-fantasy)
   ============================================================ */
[data-theme="light"] {
  --bg-0:   #f4f1ea;
  --bg-1:   #ffffff;
  --bg-2:   #f8f5ed;
  --bg-3:   #efeadd;
  --bg-4:   #e0d9c6;
  --bg-elv: #ffffff;

  --ink-0:  #1a1612;
  --ink-1:  #4a4036;
  --ink-2:  #7a6e60;
  --ink-3:  #9c9282;
  --ink-4:  #bdb4a5;

  --line-0: rgba(26, 22, 18, 0.06);
  --line-1: rgba(26, 22, 18, 0.12);
  --line-2: rgba(26, 22, 18, 0.22);

  --gold-0: #9a6a1d;
  --gold-1: #7a5316;
  --gold-2: #b58435;
  --gold-glow: rgba(154, 106, 29, 0.22);
  --gold-soft: rgba(154, 106, 29, 0.10);

  --crimson:    #a83232;
  --crimson-1:  #c84a4a;
  --crimson-soft: rgba(168, 50, 50, 0.12);

  --emerald:    #4a8a4d;
  --emerald-1:  #6cb070;
  --emerald-soft: rgba(74, 138, 77, 0.14);

  --azure:      #3c6da5;
  --azure-1:    #5d8cc4;
  --azure-soft: rgba(60, 109, 165, 0.14);

  --violet:     #6a4ba8;
  --violet-1:   #8b6dc8;
  --violet-soft: rgba(106, 75, 168, 0.14);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 4px rgba(0,0,0,0.08);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(0,0,0,0.10);
}

/* ============================================================
   THEME · DRUID (forest moss + bark + amber)
   ============================================================ */
[data-theme="druid"] {
  --bg-0:   #0d1410;
  --bg-1:   #161e18;
  --bg-2:   #1f2922;
  --bg-3:   #2a352c;
  --bg-4:   #38463a;
  --bg-elv: #182019;

  --ink-0:  #ece5d0;
  --ink-1:  #c8c4a8;
  --ink-2:  #948f78;
  --ink-3:  #65604f;
  --ink-4:  #44402f;

  --line-0: rgba(236, 229, 208, 0.06);
  --line-1: rgba(236, 229, 208, 0.12);
  --line-2: rgba(236, 229, 208, 0.20);

  --gold-0: #c89a47;        /* amber leaf */
  --gold-1: #e5b86b;
  --gold-2: #9a7732;
  --gold-glow: rgba(200, 154, 71, 0.30);
  --gold-soft: rgba(200, 154, 71, 0.10);

  --crimson:    #b04a3a;
  --crimson-1:  #d06850;
  --crimson-soft: rgba(176, 74, 58, 0.16);

  --emerald:    #5a9b50;
  --emerald-1:  #82c275;
  --emerald-soft: rgba(90, 155, 80, 0.18);

  --azure:      #4a8290;
  --azure-1:    #74a8b3;
  --azure-soft: rgba(74, 130, 144, 0.18);

  --violet:     #7c5a8c;
  --violet-1:   #a584b3;
  --violet-soft: rgba(124, 90, 140, 0.16);
}

/* ============================================================
   THEME · BARD (warm magenta + vellum + plum)
   ============================================================ */
[data-theme="bard"] {
  --bg-0:   #1a0e1a;
  --bg-1:   #261624;
  --bg-2:   #321f30;
  --bg-3:   #40293d;
  --bg-4:   #523550;
  --bg-elv: #2a1828;

  --ink-0:  #f6e4dd;
  --ink-1:  #d8c1c0;
  --ink-2:  #a08891;
  --ink-3:  #6f5e6a;
  --ink-4:  #4d4148;

  --line-0: rgba(246, 228, 221, 0.06);
  --line-1: rgba(246, 228, 221, 0.14);
  --line-2: rgba(246, 228, 221, 0.24);

  --gold-0: #e07cb4;        /* hot pink-magenta */
  --gold-1: #f4a3d0;
  --gold-2: #a8538a;
  --gold-glow: rgba(224, 124, 180, 0.34);
  --gold-soft: rgba(224, 124, 180, 0.12);

  --crimson:    #d04050;
  --crimson-1:  #ed6878;
  --crimson-soft: rgba(208, 64, 80, 0.18);

  --emerald:    #6ac094;
  --emerald-1:  #92d8b3;
  --emerald-soft: rgba(106, 192, 148, 0.18);

  --azure:      #6d92e0;
  --azure-1:    #94b3ed;
  --azure-soft: rgba(109, 146, 224, 0.20);

  --violet:     #b282e8;
  --violet-1:   #ccaaf0;
  --violet-soft: rgba(178, 130, 232, 0.20);
}

/* ============================================================
   THEME · ROGUE (shadow + blood + dim silver)
   ============================================================ */
[data-theme="rogue"] {
  --bg-0:   #08090b;
  --bg-1:   #12141a;
  --bg-2:   #1a1d24;
  --bg-3:   #22262e;
  --bg-4:   #2d323c;
  --bg-elv: #14171d;

  --ink-0:  #d8d4cb;
  --ink-1:  #a8a39a;
  --ink-2:  #7a7670;
  --ink-3:  #525049;
  --ink-4:  #3a3833;

  --line-0: rgba(216, 212, 203, 0.05);
  --line-1: rgba(216, 212, 203, 0.10);
  --line-2: rgba(216, 212, 203, 0.18);

  --gold-0: #b03a40;        /* blood */
  --gold-1: #d05a60;
  --gold-2: #7a2a30;
  --gold-glow: rgba(176, 58, 64, 0.30);
  --gold-soft: rgba(176, 58, 64, 0.10);

  --crimson:    #b03a40;
  --crimson-1:  #d05a60;
  --crimson-soft: rgba(176, 58, 64, 0.16);

  --emerald:    #5a7a5e;
  --emerald-1:  #7a9a7e;
  --emerald-soft: rgba(90, 122, 94, 0.14);

  --azure:      #4a5a72;
  --azure-1:    #6a7a92;
  --azure-soft: rgba(74, 90, 114, 0.14);

  --violet:     #6a5c82;
  --violet-1:   #8a7ca2;
  --violet-soft: rgba(106, 92, 130, 0.16);
}

/* ============================================================
   THEME · BARBARIAN (crimson rage + iron + ash)
   ============================================================ */
[data-theme="barbarian"] {
  --bg-0:   #110907;
  --bg-1:   #1d100c;
  --bg-2:   #281712;
  --bg-3:   #341e17;
  --bg-4:   #45271c;
  --bg-elv: #20120e;

  --ink-0:  #f0e4d4;
  --ink-1:  #d4c2a8;
  --ink-2:  #9c8c74;
  --ink-3:  #6b5f4d;
  --ink-4:  #4a4133;

  --line-0: rgba(240, 228, 212, 0.07);
  --line-1: rgba(240, 228, 212, 0.14);
  --line-2: rgba(240, 228, 212, 0.24);

  --gold-0: #d44a2e;        /* rage red */
  --gold-1: #f06d4f;
  --gold-2: #9c321e;
  --gold-glow: rgba(212, 74, 46, 0.40);
  --gold-soft: rgba(212, 74, 46, 0.12);

  --crimson:    #c43d3d;
  --crimson-1:  #e85f5f;
  --crimson-soft: rgba(196, 61, 61, 0.20);

  --emerald:    #6c9a4a;
  --emerald-1:  #8eb86c;
  --emerald-soft: rgba(108, 154, 74, 0.16);

  --azure:      #5e7a8a;
  --azure-1:    #7e9aaa;
  --azure-soft: rgba(94, 122, 138, 0.16);

  --violet:     #8a5cc9;
  --violet-1:   #a884d8;
  --violet-soft: rgba(138, 92, 201, 0.18);
}

/* ============================================================
   THEME · FIGHTER (steel + worn leather + polished iron)
   ============================================================ */
[data-theme="fighter"] {
  --bg-0:   #0c0e10;
  --bg-1:   #161a1f;
  --bg-2:   #1f242b;
  --bg-3:   #2a3038;
  --bg-4:   #383f49;
  --bg-elv: #181c22;

  --ink-0:  #ece6d8;
  --ink-1:  #c8c2b3;
  --ink-2:  #948e80;
  --ink-3:  #6a655a;
  --ink-4:  #4a463e;

  --line-0: rgba(236, 230, 216, 0.07);
  --line-1: rgba(236, 230, 216, 0.14);
  --line-2: rgba(236, 230, 216, 0.24);

  --gold-0: #b8923f;        /* worn brass */
  --gold-1: #d4ae5e;
  --gold-2: #826527;
  --gold-glow: rgba(184, 146, 63, 0.32);
  --gold-soft: rgba(184, 146, 63, 0.10);

  --crimson:    #b03a3a;
  --crimson-1:  #d05858;
  --crimson-soft: rgba(176, 58, 58, 0.16);

  --emerald:    #5e8a5a;
  --emerald-1:  #82ad7d;
  --emerald-soft: rgba(94, 138, 90, 0.16);

  --azure:      #5a7896;
  --azure-1:    #7e9ab5;
  --azure-soft: rgba(90, 120, 150, 0.18);

  --violet:     #7560a0;
  --violet-1:   #978abf;
  --violet-soft: rgba(117, 96, 160, 0.16);
}

/* ============================================================
   ACCENT VARIATIONS
   ============================================================ */
[data-accent="copper"] {
  --gold-0: #c97d4a;
  --gold-1: #e8a071;
  --gold-2: #a05a2a;
  --gold-glow: rgba(201, 125, 74, 0.35);
  --gold-soft: rgba(201, 125, 74, 0.10);
}
[data-accent="silver"] {
  --gold-0: #c7c3b8;
  --gold-1: #e0ddd0;
  --gold-2: #9a968a;
  --gold-glow: rgba(199, 195, 184, 0.25);
  --gold-soft: rgba(199, 195, 184, 0.08);
}
[data-accent="emerald"] {
  --gold-0: #6cb070;
  --gold-1: #92cf95;
  --gold-2: #4a8a4d;
  --gold-glow: rgba(108, 176, 112, 0.30);
  --gold-soft: rgba(108, 176, 112, 0.10);
}

/* ============================================================
   GLOBAL
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  /* parchment / wood grain texture, very subtle */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 168, 87, 0.04), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(196, 61, 61, 0.03), transparent 50%);
}

::selection { background: var(--gold-soft); color: var(--ink-0); }

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-glow);
}

/* Display & body typography utilities */
.display { font-family: var(--font-display); letter-spacing: 0.02em; font-weight: 600; }
.mono    { font-family: var(--font-mono); }
.script  { font-family: var(--font-script); font-style: italic; }
.caps    { text-transform: uppercase; letter-spacing: 0.16em; }
.muted   { color: var(--ink-2); }
.dim     { color: var(--ink-3); }
.gold    { color: var(--gold-0); }
.crimson { color: var(--crimson-1); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--ink-0);
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; padding: 0; }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.app-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-body {
  flex: 1 1 0;
  padding: 24px 28px 32px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .app-body { padding: 20px; }
}