/* tokens.css — single source of truth for all design values
   Import this first. Never put raw numbers in component files.
   All spacing, colour, typography, z-index, and layout values live here.

   HARD RULES — apply before every change:
   1. CSS    — add to existing rules before creating new ones.
   2. Mobile — add to existing media queries, not new blocks.
   3. Z-index — always use a token from the scale below. Never raw numbers.
   4. New file — only if it prevents a future refactor.
   5. Emojis — never. Use HTML entities or CSS content.
   6. Damage — always use combat._dealDamage() to hit an enemy.
               Never call enemy.takeDamage() or applyResistance()
               directly — _dealDamage handles labels, tracking, and
               resistance in one place.
   7. No shortcuts — never do it the easy way. Always the right and
               cleanest way to prevent future issues. If a quick fix
               introduces technical debt, it is the wrong fix.
   8. Rewrite when needed — if rewriting a section prevents future
               bugs or issues, rewrite it. But map it entirely first:
               document inputs, outputs, dependencies, and side effects
               before touching a single line of code.

   NOTE: Remove the rules comment block before going public. */

:root {

  /* ── COLOUR ────────────────────────────────────────────── */
  --bg-base:          #0e0b08;   /* zone_01 default — overridden by data-theme */
  --bg-inset:         #161009;
  --bg-header:        #1e150d;
  --border:           #4a2e18;   /* zone_01 default             */
  --text-primary:     #d4a870;   /* main text                   */
  --text-secondary:   #8b5a2b;   /* labels, secondary info      */
  --accent:           #c8762a;   /* primary action, highlights  */

  /* hp / mp bars */
  --hp-player:        #c0392b;
  --hp-enemy-mid:     #e67e22;
  --hp-enemy-low:     #c0392b;
  --hp-track:         #2a1008;
  --mp-fill:          #2980b9;
  --mp-track:         #c0d8e8;
  --mp-border:        #9ab5c8;

  /* semantic */
  --color-danger:     #8b2020;
  --color-danger-border: #6a1515;
  --color-danger-text: #ffe8e8;
  --color-success:    #3a6e1a;
  --color-success-text: #e8f5d0;

  /* button surfaces */
  --btn-ghost-bg:     #1e150d;
  --btn-ghost-border: #c4a060;
  --btn-primary-bg:   #4a6e2a;
  --btn-primary-border: #2e4e18;

  /* ── TYPOGRAPHY ────────────────────────────────────────── */
  --font-display:     'Cinzel', Georgia, serif;
  --font-body:        'Crimson Text', Georgia, serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --weight-normal: 400;
  --weight-bold:   600;

  /* ── SPACING ───────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── RADIUS ────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* ── LAYOUT ────────────────────────────────────────────── */
  --topbar-h:      52px;
  --bottombar-h:   58px;
  --safe-top:      calc(var(--topbar-h)    + env(safe-area-inset-top));
  --safe-bottom:   calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  --touch-min:     44px;
  --content-max:   480px;

  /* ── BREAKPOINTS (reference only — use in media queries) ── */
  --bp-mobile:   480px;
  --bp-tablet:   768px;
  --bp-desktop: 1024px;

  /* ── Z-INDEX — fixed scale, never deviate ──────────────── */
  --z-below:     -1;   /* behind everything (bg blur)         */
  --z-base:       0;   /* default document flow               */
  --z-local-1:    1;   /* layer 1 within a positioned parent  */
  --z-local-2:    2;   /* layer 2 within a positioned parent  */
  --z-raised:    10;
  --z-sticky:   100;   /* nav bars                    */
  --z-overlay:  200;   /* modal backdrops              */
  --z-modal:    300;   /* modals                       */
  --z-modal-top:400;   /* modals over modals, max 2    */
  --z-hud-label:500;   /* floating combat hit labels   */
  --z-toast:    500;   /* always above modals          */
  --z-tooltip:  600;
  --z-critical: 700;

  /* ── ANIMATION ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --dur-fast:   150ms;
  --dur-med:    250ms;
  --dur-slow:   400ms;

  /* ── BARS ──────────────────────────────────────────────── */
  --hp-bar-h:  7px;
  --mp-bar-h:  5px;
  --energy-bar-h: 5px;
  --bar-radius: 3px;

  /* ── ENERGY — class-specific resource bar colour ───────── */
  /* Overridden per-class via [data-class] attribute selectors
     in battle.css. Default is neutral until class is chosen. */
  --energy-fill:        #888888;
  --energy-track:       #1a1a1a;
  --energy-label:       #aaaaaa;

  /* per-class energy colours (applied via JS on class select) */
  --energy-sentinel:    #4a6aaa;   /* Resolve  — steel blue    */
  --energy-shadow:      #6a5aaa;   /* Focus    — slate violet  */
  --energy-warden:      #aa3a2a;   /* Rage     — blood red     */
  --energy-soulbinder:  #8a2aaa;   /* Essence  — deep purple   */
  /* Arcanist has no energy bar — uses existing MP bar */

  /* ── PORTRAIT ──────────────────────────────────────────── */
  --portrait-size:  100px;
  --portrait-border: 2px;
}