/* ============================================================================
 * Alpha Archers 2D — variables.css
 * Design tokens: colors, fonts, shadows, animation timing, UI sizing and
 * breakpoints. Every other stylesheet consumes these custom properties.
 * ========================================================================== */

:root {
  /* ------------------------------------------------------------- palette */
  --c-bg: #0b0a14;
  --c-bg-raised: #14121f;
  --c-panel: rgba(18, 16, 30, 0.92);
  --c-panel-border: rgba(140, 130, 200, 0.22);
  --c-panel-inner: rgba(255, 255, 255, 0.04);

  --c-text: #e8e4f0;
  --c-text-dim: #9a94b8;
  --c-text-faint: #6a6488;

  --c-accent: #3ec6a8;
  --c-accent-soft: rgba(62, 198, 168, 0.18);
  --c-gold: #e6b35e;
  --c-gold-soft: rgba(230, 179, 94, 0.16);
  --c-danger: #e65e6a;
  --c-danger-soft: rgba(230, 94, 106, 0.16);
  --c-arcane: #b98eff;

  --c-hp: #58d868;
  --c-hp-low: #e6555e;
  --c-stamina: #e6c85e;
  --c-mana: #5ea8ff;
  --c-xp: #b98eff;
  --c-boss: #c23a5e;

  /* --------------------------------------------------------------- fonts */
  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Cascadia Code', Consolas, 'Courier New', monospace;

  /* ------------------------------------------------------------- shadows */
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-glow-accent: 0 0 18px rgba(62, 198, 168, 0.45);
  --shadow-glow-gold: 0 0 18px rgba(230, 179, 94, 0.45);
  --shadow-text: 0 2px 6px rgba(0, 0, 0, 0.8);

  /* ------------------------------------------------------------- timing */
  --t-fast: 0.14s;
  --t-med: 0.28s;
  --t-slow: 0.55s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------ UI sizes */
  --ui-scale: 1;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  /* The stage is a fixed 1280x720 space scaled to fit, so in-stage sizing is
     plain px. Viewport units here would resolve against the real screen and
     make a phone diverge from desktop — the one thing the stage prevents. */
  --hud-pad: 26px;
  --bar-w: 240px;

  /* Stage-relative units: 1% of the fixed 1280x720 stage. Anything laid out
     inside the stage uses these instead of vw/vh, so a phone and a desktop
     resolve them to the same value and the layout cannot diverge. */
  --sw: 12.8px;
  --sh: 7.2px;

  /* -------------------------------------------------------- breakpoints
   * (for reference in responsive.css)
   *   --bp-mobile:  600px
   *   --bp-tablet:  900px
   *   --bp-desktop: 1280px
   * ------------------------------------------------------------------- */
}

/* High-contrast accessibility theme overrides */
body.high-contrast {
  --c-panel: rgba(8, 8, 14, 0.97);
  --c-panel-border: rgba(255, 255, 255, 0.45);
  --c-text: #ffffff;
  --c-text-dim: #d0ccdf;
  --c-text-faint: #a8a2c0;
}

/* ----------------------------------------------------------------------------
 * Elevation
 *
 * The interface previously had exactly two shadows, so a panel, a card and a
 * modal all sat at the same visual altitude. These are layered ambient + key
 * pairs: the ambient spread grows with height, the key shadow stays tight, and
 * an inner top highlight catches the light the way a raised surface would.
 * ------------------------------------------------------------------------- */
:root {
  --elev-1:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 3px 10px rgba(0, 0, 0, 0.22);
  --elev-2:
    0 2px 4px rgba(0, 0, 0, 0.32),
    0 8px 24px rgba(0, 0, 0, 0.34);
  --elev-3:
    0 4px 8px rgba(0, 0, 0, 0.36),
    0 18px 52px rgba(0, 0, 0, 0.46),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
  --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Rarity language, shared by boons, loot reveals, toasts and the ledger. */
  --r-common: #9ad6c8;
  --r-rare: #7fb4ff;
  --r-epic: #c9a4ff;
  --r-legendary: #ffcf4a;

  /* Springs — micro-interactions read as physical rather than linear. */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}