/* ============================================================
   OUTCLASSED — Fantasy MMO RPG Design System
   Tokens: colors, type, surfaces, image-borders
   ============================================================ */

/* ---- Type (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cinzel+Decorative:wght@700;900&family=IM+Fell+English:ital@0;1&family=Marcellus+SC&display=swap');

:root {
  /* === RARITY === five tiers, mirrors Frame_*/Background_* assets */
  --rar-common:    #c8c8c8;   /* grey  — Frame_grey */
  --rar-magic:     #4a7ad6;   /* blue  — Frame_blue */
  --rar-rare:      #5fc06a;   /* green — Frame_green */
  --rar-epic:      #b066d9;   /* purple— Frame_purple */
  --rar-legendary: #e98030;   /* red/orange — Frame_red */

  /* === RESOURCE BARS === */
  --hp:        #c8364a;       /* health */
  --hp-deep:   #6e1422;
  --mana:      #3a78d8;       /* mana */
  --mana-deep: #16356f;
  --xp:        #e8b340;       /* experience gold */
  --energy:    #5fc06a;       /* stamina/energy */
  --venom:     #98c040;       /* poisoned-over fill */

  /* === PARCHMENT / PAPER === */
  --paper-light: #ecdcb2;
  --paper:       #d8c089;
  --paper-deep:  #a98850;
  --paper-edge:  #6e4d24;

  /* === GILT / METAL TRIM === */
  --gold-hi:   #f4dc88;
  --gold:      #c9a04a;
  --gold-lo:   #7a5b22;

  /* === INK / TEXT === */
  --ink:        #2a1d10;
  --ink-soft:   #4a3520;
  --ink-mute:   #806448;
  --bone:       #f5ead0;       /* on-dark text */
  --bone-mute:  #c8b48a;

  /* === DARKS / SURFACES === */
  --void:       #110a05;
  --shadow:     #1d130a;
  --panel-dk:   #2a1d12;
  --panel-mid:  #3a2818;

  /* === SEMANTIC HUD === */
  --buff:       #5fc06a;
  --debuff:     #c8364a;
  --hostile:    #e54040;
  --friendly:   #5fc06a;

  /* === TYPE === */
  --ff-display: "Cinzel Decorative", "Cinzel", serif;       /* banners, hero numbers */
  --ff-title:   "Cinzel", serif;                             /* CTA/labels — carved caps */
  --ff-body:    "IM Fell English", "Goudy Bookletter 1911", serif; /* paragraphs */
  --ff-ui:      "Marcellus SC", "Cinzel", serif;             /* button text */
  --ff-num:     "Cinzel", "Times New Roman", serif;          /* tabular */

  /* === SHADOWS === */
  --carve:    inset 0 1px 0 rgba(255,235,180,.18), inset 0 -1px 0 rgba(0,0,0,.55);
  --emboss:   0 1px 0 rgba(255,235,180,.35), 0 -1px 0 rgba(0,0,0,.7);
  --drop:     0 6px 0 rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.55);
}

/* ---- Type roles ---- */
.t-display { font-family: var(--ff-display); font-weight: 900; letter-spacing:.02em; }
.t-title   { font-family: var(--ff-title);   font-weight: 700; letter-spacing:.06em; text-transform: uppercase; }
.t-body    { font-family: var(--ff-body);    font-weight: 400; }
.t-ui      { font-family: var(--ff-ui);      font-weight: 400; letter-spacing:.08em; text-transform: uppercase; }
.t-num     { font-family: var(--ff-num);     font-weight: 700; font-variant-numeric: tabular-nums; }

/* Carved-stone heading: dark with gold inner & shadow drop */
.t-carved {
  font-family: var(--ff-display);
  font-weight: 900;
  color: var(--gold-hi);
  text-shadow:
    0 1px 0 var(--gold-lo),
    0 2px 0 #4a3008,
    0 3px 0 #2a1c08,
    0 4px 6px rgba(0,0,0,.7);
}
.t-ink {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}

/* ---- Rarity helpers ---- */
.rar-common    { --rar: var(--rar-common); }
.rar-magic     { --rar: var(--rar-magic); }
.rar-rare      { --rar: var(--rar-rare); }
.rar-epic      { --rar: var(--rar-epic); }
.rar-legendary { --rar: var(--rar-legendary); }

/* ---- Reusable backdrops ---- */
.bg-pattern {
  background:
    linear-gradient(rgba(20,12,4,.55), rgba(20,12,4,.55)),
    url('assets/pattern.png');
  background-size: auto, 320px;
}
.bg-deep {
  background:
    radial-gradient(ellipse at 50% 30%, #2a1d10 0%, #110a05 70%),
    url('assets/pattern.png');
  background-size: auto, 320px;
  background-blend-mode: normal, multiply;
}

/* ---- Image-border helpers (9-slice via border-image) ---- */
/* Paper sheet — soft tan body */
.paper {
  border-image: url('assets/Paper_01.png') 360 fill / 60px / 0 round;
  color: var(--ink);
}

/* Info window — small popup */
.info-window {
  border-image: url('assets/info_window.png') 200 fill / 48px / 0 round;
  color: var(--bone);
}

/* Dialogue strip — wide horizontal bar */
.dialog-strip {
  border-image: url('assets/dialoge_frame.png') 60 fill / 30px / 0 round;
  color: var(--bone);
}

/* Scroll — vertical parchment column */
.scroll-frame {
  border-image: url('assets/scroll_frame.png') 200 fill / 48px / 0 round;
  color: var(--ink);
}

/* Inventory big panel */
.inv-panel {
  border-image: url('assets/inventory_frame.png') 360 fill / 80px / 0 round;
  color: var(--bone);
}

/* HP/Mana/XP frame */
.bar-frame-hp   { border-image: url('assets/Hp_frame.png')        80 / 24px / 0 stretch; }
.bar-frame-big  { border-image: url('assets/big_bar_frame.png')  120 / 28px / 0 stretch; }

/* Wide Buttons */
.btn-long       { border-image: url('assets/long_button.png')     90 fill / 28px / 0 stretch; }
.btn-mid        { border-image: url('assets/mid_button.png')      90 fill / 28px / 0 stretch; }