/* =========================================================
   ETHERNALIS — Colors & Type
   A dark fantasy roguelike card-game design system.
   ========================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "NC";
  src: url("./fonts/nc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body/quality/log typeface — a rustic serif. IM Fell English is the
   closest match on Google Fonts to the in-game serif used for item
   names, card titles, and the chronicle log. Cormorant Garamond is
   used for longer narrative prose (Player's Guide passages). */
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* =====================================================
     COLOR — Ethernalis lives in near-black candlelight.
     All foreground hues are desaturated and slightly warm,
     as if viewed through smoke.
     ===================================================== */

  /* Surface / backgrounds (darkest → lightest) */
  --bg-abyss:     #000000;          /* page background, void */
  --bg-vault:     #0a0806;          /* primary app surface   */
  --bg-parchment-dark: #120e0a;     /* panel/card body       */
  --bg-panel:     #1a1410;          /* raised panel          */
  --bg-panel-2:   #221a14;          /* hover / selected      */
  --bg-stone:     #2a221c;          /* divider wash          */

  /* Parchment (race/lore cards, tooltips) */
  --bg-parchment: #6b4a2a;          /* torn-paper backdrop   */
  --bg-parchment-soft: #8a6a45;
  --ink-parchment: #1a1208;          /* ink on parchment      */

  /* Foreground / ink */
  --fg-bone:      #d9cdb8;          /* primary body text     */
  --fg-bone-dim:  #a89a85;          /* secondary body        */
  --fg-ash:       #6b6358;          /* tertiary / disabled   */
  --fg-ink:       #3a342c;          /* ink-on-bone           */

  /* Brand / UI accents (muted, torchlit) */
  --gold:         #c9a25a;          /* headings, highlights  */
  --gold-bright:  #e8c878;          /* hover gold            */
  --gold-deep:    #8a6a2e;          /* pressed / border      */
  --ember:        #d97b3a;          /* flame, alert title    */
  --ember-deep:   #8a3a18;

  /* Story / log semantic colors — pulled directly from the UI */
  --log-default:  #d9cdb8;          /* neutral prose         */
  --log-location: #e8c878;          /* "You have reached..." */
  --log-npc:      #c9a25a;          /* NPC names             */
  --log-warning:  #d97b3a;          /* "You are taking..."   */
  --log-danger:   #b84545;          /* blood, hostile        */
  --log-safe:     #b8a868;          /* "feel safe for now"   */
  --log-xp:       #9aa86a;          /* xp, crafted           */

  /* Vitals — the Vital Trinities */
  --vital-health:  #a63030;         /* red orb               */
  --vital-mana:    #2e5f8a;         /* blue orb              */
  --vital-stamina: #4a7a3a;         /* green bar             */
  --vital-hunger:  #c0783a;
  --vital-thirst:  #6a8aa0;
  --vital-temp:    #8aa6c0;
  --vital-xp:      #c9a25a;

  /* Quality tiers (item names) — from Poor to Legendary */
  --q-cursed:     #7a4a4a;
  --q-poor:       #8a8a8a;
  --q-common:     #d9cdb8;
  --q-decent:     #9aa86a;          /* green — "Decent Falchion" */
  --q-good:       #6aa0c0;          /* blue  — "Good Blessed Ring" */
  --q-superior:   #a27ad0;
  --q-masterwork: #e8c878;          /* gold  */
  --q-legendary:  #d97b3a;

  /* Elemental damage types (runes, spells) */
  --elem-fire:    #d97b3a;
  --elem-water:   #4a8ab8;
  --elem-holy:    #e8c878;
  --elem-dark:    #6a3a8a;
  --elem-acid:    #7a9a3a;
  --elem-arcane:  #a27ad0;

  /* Borders & dividers */
  --border-hair:   rgba(201, 162, 90, 0.15);
  --border-line:   rgba(201, 162, 90, 0.28);
  --border-strong: rgba(201, 162, 90, 0.55);
  --border-bone:   rgba(217, 205, 184, 0.12);
  --border-ember:  rgba(217, 123, 58, 0.45);

  /* Inner + outer shadows */
  --shadow-vignette: inset 0 0 160px 40px rgba(0,0,0,0.75);
  --shadow-card:     0 4px 18px rgba(0,0,0,0.75), 0 1px 0 rgba(201,162,90,0.08) inset;
  --shadow-panel:    0 2px 0 rgba(0,0,0,0.9) inset, 0 -2px 0 rgba(201,162,90,0.05) inset;
  --shadow-glow-gold: 0 0 24px rgba(232,200,120,0.35);
  --shadow-glow-ember: 0 0 24px rgba(217,123,58,0.4);

  /* =====================================================
     TYPE
     ===================================================== */
  --font-display: "NC", "Nova Cut", "IM Fell English SC", "Cinzel", serif;
  --font-gothic:  "NC", "Nova Cut", "IM Fell English SC", serif;
  --font-serif:   "IM Fell English", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-narrative: "Cormorant Garamond", "IM Fell English", Georgia, serif;
  --font-small-caps: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale — generous, book-like. Most UI sits at 14–16px; */
  /* card titles, log entries, quest prose drive the feel. */
  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-md:    16px;
  --fs-lg:    19px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;
  --fs-hero:  96px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-caps:   0.08em;
  --ls-caps-wide: 0.18em;

  /* Spacing — 4px base, but layout favors 8/12/16/24/32 */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radii — corners are mostly sharp. Cards use 2–4px; orbs are circles. */
  --r-none:  0;
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    8px;
  --r-orb:   9999px;
}

/* ---------- Semantic type styles ---------- */

.ethernalis-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-caps);
  color: var(--fg-bone);
  text-shadow: 0 0 24px rgba(0,0,0,0.9), 0 2px 0 rgba(0,0,0,0.6);
  line-height: 1;
}
.ethernalis-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  letter-spacing: var(--ls-caps);
  color: var(--gold);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.ethernalis-h2 {
  font-family: var(--font-small-caps);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-caps);
  color: var(--fg-bone);
  line-height: var(--lh-tight);
}
.ethernalis-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--gold);
  line-height: var(--lh-snug);
  font-style: italic;
}
.ethernalis-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--fg-bone);
  text-align: center;
  font-style: italic;
  line-height: var(--lh-tight);
}
.ethernalis-eyebrow {
  font-family: var(--font-small-caps);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  color: var(--gold-deep);
  text-transform: uppercase;
}
.ethernalis-body {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-bone);
}
.ethernalis-narrative {
  font-family: var(--font-narrative);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-bone);
}
.ethernalis-caption {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--fg-bone-dim);
  line-height: var(--lh-snug);
  font-style: italic;
}
.ethernalis-label {
  font-family: var(--font-small-caps);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  color: var(--fg-bone-dim);
  text-transform: uppercase;
}
.ethernalis-quote {
  font-family: var(--font-narrative);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--fg-bone);
  line-height: var(--lh-snug);
}
.ethernalis-log {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--log-default);
}
.ethernalis-stat {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--fg-bone-dim);
  letter-spacing: 0.02em;
}