/* ============================================================
   ELDEN FORGE — Effects: radii, borders, shadows, glows, gradients
   The forge look leans on: warm panel gradients, ember glows
   (orange box-shadow), inset darkening, and gold metallic edges.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:  7px;
  --radius-sm:  9px;
  --radius-md:  12px;   /* default card */
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 22px;   /* home / splash card */
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px; /* @kind other */
  --bw-bold: 2px; /* @kind other */

  /* ---- Drop shadows (depth) ---- */
  --shadow-card: 0 0 20px rgba(0,0,0,.24);
  --shadow-raised: 0 18px 40px -12px rgba(0,0,0,.7);
  --shadow-modal: 0 0 60px rgba(0,0,0,.7);
  --shadow-press-3d: 0 4px 0 rgba(120,64,12,.85), 0 10px 22px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- Ember / fire glows (the signature accent) ---- */
  --glow-ember-sm:  0 0 16px rgba(232,85,24,.25);
  --glow-ember-md:  0 0 28px rgba(232,85,24,.55);
  --glow-ember-lg:  0 0 40px rgba(232,85,24,.65);
  --glow-gold:      0 0 14px rgba(241,195,74,.45);
  --glow-gold-text: 0 0 14px rgba(241,195,74,.7);
  --glow-mithril:   0 0 22px rgba(74,116,255,.45);
  --glow-success:   0 0 14px rgba(65,183,110,.7);

  /* ---- Inset (forge depth inside orbs/bars) ---- */
  --inset-deep: inset 0 0 8px #000;

  /* ---- Signature gradients ---- */
  --grad-app: radial-gradient(circle at 50% 15%, #2b1208 0, #140803 38%, #080402 78%); /* @kind color */
  --grad-gold-btn:  linear-gradient(180deg, #ffe38b, #b67a13); /* @kind color */
  --grad-fire-btn:  linear-gradient(180deg, #ffd24a, #f4b53c 42%, #b9781d); /* @kind color */
  --grad-ghost-btn: linear-gradient(180deg, #4a2209, #241005); /* @kind color */
  --grad-red-btn:   linear-gradient(180deg, #8d210a, #391005); /* @kind color */
  --grad-card:      linear-gradient(180deg, rgba(39,19,7,.96), rgba(18,7,2,.92)); /* @kind color */
  --grad-bar:       linear-gradient(90deg, var(--red-500), #ff8f18, var(--gold-300)); /* progress fill */
  --grad-success-bar: linear-gradient(90deg, #1a6a35, #41b76e, #b8ff9d); /* @kind color */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1.05); /* @kind other */
  --dur-fast: .14s; /* @kind other */
  --dur-base: .18s; /* @kind other */
  --dur-slow: .26s; /* @kind other */
}