/* ==========================================================================
   Riftstake — design tokens
   The single source of truth for colour, type, space, shape and motion.
   Nothing in here selects anything; every other stylesheet reads from it.

   Palette note: the den is lamplit, not unlit. Surfaces sit in warm cocoa
   rather than near-black, ink is bright and creamy, and shadows are tinted
   brown instead of pure black so nothing reads as a hole in the page.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --obsidian:#31251f;
  --felt-0:#3b2e28;
  --felt-1:#453630;
  --felt-2:#513f37;
  --felt-3:#5e4a40;
  --felt-4:#6e574a;

  --line:#6e574a;
  --line-soft:#584539;
  --line-strong:#93796a;

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  --ink:#fef9f2;
  --ink-dim:#e0d1c2;
  --ink-faint:#bcaa99;

  /* ── Accents ──────────────────────────────────────────────────────────── */
  --ember:#ff7d4d;
  --ember-soft:#ffa87f;
  --ember-deep:#964a2c;
  --brass:#e6c184;
  --brass-soft:#f9e6c2;
  --brass-deep:#8a7043;
  --good:#8fd873;
  --bad:#f0736a;

  /* ── Elements ─────────────────────────────────────────────────────────── */
  --el-ember:#ff7d4d;
  --el-verdant:#8fd873;
  --el-tempest:#c39bf5;
  --el-tide:#5fc9e8;

  /* ── Rarity ───────────────────────────────────────────────────────────── */
  --r-common:#b3a597;
  --r-rare:#79bcec;
  --r-epic:#c284ee;
  --r-legendary:#f7c257;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", monospace;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-sm:9px; --r-md:13px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --card-w:170px;
  --card-r:18px;

  /* ── Elevation ────────────────────────────────────────────────────────────
     Brown-tinted and shallow. Black drop shadows on a warm surface read as
     grime; these read as light falling off an edge.
     ---------------------------------------------------------------------- */
  --sh-1:0 1px 2px rgba(26,16,11,.32);
  --sh-2:0 2px 6px rgba(26,16,11,.26), 0 12px 28px -14px rgba(20,12,8,.5);
  --sh-3:0 4px 10px rgba(26,16,11,.28), 0 28px 56px -24px rgba(20,12,8,.62);
  --glow-ember:0 0 26px -6px rgba(255,125,77,.6);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --e-out:cubic-bezier(.22,.85,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.5,.6,1);
  --t-fast:.14s;
  --t-med:.28s;
  --t-slow:.5s;

  /* ── Layers ───────────────────────────────────────────────────────────── */
  --z-sticky:20;
  --z-veil:60;
  --z-fx:70;
  --z-toast:80;

  /* Fallbacks for the two contextual tokens below. Declared on :root (rather
     than on .card) so the attribute selectors always win the cascade. */
  --el:var(--el-ember);
  --rar:var(--r-common);
}

/* Element helpers — used by cards, chips, filter pills and art frames. */
[data-element="ember"]  { --el:var(--el-ember);   }
[data-element="verdant"]{ --el:var(--el-verdant); }
[data-element="tempest"]{ --el:var(--el-tempest); }
[data-element="tide"]   { --el:var(--el-tide);    }

[data-rarity="common"]   { --rar:var(--r-common);    }
[data-rarity="rare"]     { --rar:var(--r-rare);      }
[data-rarity="epic"]     { --rar:var(--r-epic);      }
[data-rarity="legendary"]{ --rar:var(--r-legendary); }