/* ═══════════════════════════════════════════════════════════════
   VEILBORN DESIGN TOKENS v2
   Single source of truth. Every CSS file reads from here.
   ═══════════════════════════════════════════════════════════════ */
:root {

    /* ── SURFACES ─────────────────────────────────────────── */
    --c-void:       #08080e;
    --c-abyss:      #0c0c14;
    --c-shadow:     #10101c;
    --c-dusk:       #161625;
    --c-twilight:   #1c1c30;
    --c-mist:       #24243c;
    --c-fog:        #2e2e4a;

    /* ── ACCENTS ──────────────────────────────────────────── */
    --c-gold:       #d4a030;
    --c-gold-hi:    #f0d060;
    --c-gold-lo:    #8a6420;
    --c-gold-tint:  rgba(212,160,48,.08);
    --c-veil:       #c8a2c8;
    --c-veil-hi:    #dbb8db;
    --c-veil-lo:    #7a5a7a;
    --c-veil-tint:  rgba(200,162,200,.08);

    /* ── SEMANTIC ─────────────────────────────────────────── */
    --c-hp:         #e04040;   --c-hp-dark: #601818;
    --c-mp:         #3080e0;   --c-mp-dark: #143868;
    --c-sp:         #40b840;   --c-sp-dark: #185018;
    --c-xp:         #e8c840;
    --c-success:    #40b840;
    --c-warning:    #e8a030;
    --c-error:      #e04040;
    --c-info:       #3080e0;

    /* ── TEXT ──────────────────────────────────────────────── */
    --c-text:       #e0d8cc;
    --c-text-sub:   #b0a898;
    --c-text-muted: #78706a;
    --c-text-dim:   #504840;

    /* ── RARITY ───────────────────────────────────────────── */
    --c-common:     #9a9a9a;
    --c-rare:       #4488ff;
    --c-epic:       #b040e8;
    --c-legendary:  #f09020;
    --c-ancient:    #e83838;

    /* ── FONTS ────────────────────────────────────────────── */
    --f-display:   'Cinzel', serif;
    --f-body:      'Crimson Text', Georgia, serif;
    --f-mono:      'Courier New', monospace;

    /* ── TYPE SCALE ───────────────────────────────────────── */
    --fs-2xs:  .625rem;     /* 10 */
    --fs-xs:   .75rem;      /* 12 */
    --fs-sm:   .8125rem;    /* 13 */
    --fs-base: .9375rem;    /* 15 */
    --fs-lg:   1.0625rem;   /* 17 */
    --fs-xl:   1.25rem;     /* 20 */
    --fs-2xl:  1.5rem;      /* 24 */
    --fs-3xl:  2rem;        /* 32 */
    --fs-hero: clamp(2rem, 1.4rem + 2vw, 3.5rem);

    --lh-tight:   1.15;
    --lh-base:    1.5;
    --lh-relaxed: 1.7;
    --ls-wide:    .06em;
    --ls-wider:   .10em;

    /* ── SPACING (4px base) ───────────────────────────────── */
    --sp-1:  .25rem;    /* 4   */
    --sp-2:  .5rem;     /* 8   */
    --sp-3:  .75rem;    /* 12  */
    --sp-4:  1rem;      /* 16  */
    --sp-5:  1.5rem;    /* 24  */
    --sp-6:  2rem;      /* 32  */
    --sp-7:  3rem;      /* 48  */
    --sp-8:  4rem;      /* 64  */

    /* ── RADII ────────────────────────────────────────────── */
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 9999px;

    /* ── BORDERS ──────────────────────────────────────────── */
    --b-subtle:  1px solid rgba(200,162,200,.06);
    --b-default: 1px solid rgba(200,162,200,.12);
    --b-strong:  1px solid rgba(200,162,200,.22);
    --b-gold:    1px solid rgba(212,160,48,.25);

    /* ── SHADOWS ──────────────────────────────────────────── */
    --sh-sm:  0 2px 6px rgba(0,0,0,.30);
    --sh-md:  0 4px 14px rgba(0,0,0,.40);
    --sh-lg:  0 8px 28px rgba(0,0,0,.50);
    --sh-xl:  0 14px 44px rgba(0,0,0,.60);
    --sh-glow-gold: 0 0 20px rgba(212,160,48,.15);
    --sh-glow-veil: 0 0 20px rgba(200,162,200,.12);

    /* ── GLASS ────────────────────────────────────────────── */
    --glass-bg:     rgba(12,12,20,.75);
    --glass-blur:   blur(16px);
    --glass-border: 1px solid rgba(200,162,200,.08);

    /* ── EASING ───────────────────────────────────────────── */
    --ease-out:    cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur-fast:    160ms;
    --dur-base:    260ms;
    --dur-slow:    420ms;

    /* ── Z-INDEX ──────────────────────────────────────────── */
    --z-sidebar:  300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-toast:    600;

    /* ── LAYOUT ───────────────────────────────────────────── */
    --sidebar-w:    220px;
    --content-max:  1200px;
}