/* DEEPMINE UI v4 — design tokens.
   Cascade layers: every UI stylesheet places its rules in one of these layers,
   so page styles override components without specificity contests. */
@layer tokens, base, components, shell, pages, overrides;

@font-face {
  font-family: 'Baloo 2 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/fonts/baloo-2-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/baloo-2-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/fonts/baloo-2-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/baloo-2-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Ground: deep forest green, slightly warm. */
    --bg-0: #06130e;
    --bg-1: #0a1f17;
    --bg-2: #0d271d;
    --surface-1: #123326;
    --surface-2: #173d2e;
    --surface-3: #1e4a39;
    --surface-4: #265844;
    --surface-inset: #081a13;
    --surface-glass: rgb(9 28 21 / .82);

    --line-1: rgb(206 228 196 / .09);
    --line-2: rgb(206 228 196 / .16);
    --line-3: rgb(206 228 196 / .26);
    --line-gold: rgb(242 205 128 / .36);
    --line-gold-strong: rgb(255 224 150 / .72);

    /* Text */
    --text-1: #f7f0dd;
    --text-2: #c4d5c8;
    --text-3: #9db3a7;   /* captions; >= 4.5:1 up to --surface-3 */
    --text-4: #8aa094;   /* placeholders, decorative and disabled text only — never for content */
    --text-on-gold: #3a2507;
    --text-gold: #f6d68f;

    /* Brand gold */
    --gold-50: #fff7df;
    --gold-100: #ffeab3;
    --gold-200: #fbdc8e;
    --gold-300: #f5c869;
    --gold-400: #eab14b;
    --gold-500: #d99a36;
    --gold-700: #a06c22;
    --gold-800: #7a4f17;
    --gold-900: #4f320d;

    /* Jade: positive, growth, owned */
    --jade-200: #b5f0d1;
    --jade-300: #86e0b5;
    --jade-400: #55c995;
    --jade-500: #34a877;
    --jade-700: #1d6e4f;

    /* States */
    --danger: #ff8f70;
    --danger-strong: #f0644a;
    --danger-bg: rgb(255 120 90 / .12);
    --warn: #ffcb6b;
    --warn-bg: rgb(255 196 92 / .11);
    --info: #86ccff;
    --info-bg: rgb(120 196 255 / .11);
    --success: var(--jade-300);
    --success-bg: rgb(80 200 140 / .12);
    --ton: #33a6f0;

    /* Rarity — saturated enough to read at a glance on dark green. */
    --rarity-common: #b9c6bb;
    --rarity-uncommon: #79d488;
    --rarity-rare: #58b8ff;
    --rarity-epic: #bb88ff;
    --rarity-legendary: #ffb845;
    --rarity-mythic: #ff7272;
    --rarity-exotic: #ff8ad6;

    /* Typography. Chinese uses the platform font; Latin and figures use Baloo 2. */
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
    --font-display: "Baloo 2 Variable", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-26: 26px;
    --fs-32: 32px;
    --fs-card-title: 16px;   /* headings inside cards */
    --fs-hero-title: 18px;
    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-body: 1.55;

    /* Space (4px grid) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --gutter: 12px;

    /* Radius */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Elevation */
    --hl-top: inset 0 1px 0 rgb(255 255 255 / .06);
    --sh-1: 0 1px 0 rgb(0 0 0 / .25), 0 6px 14px -8px rgb(0 0 0 / .7);
    --sh-2: 0 2px 0 rgb(0 0 0 / .22), 0 14px 28px -14px rgb(0 0 0 / .85);
    --sh-3: 0 24px 60px -18px rgb(0 0 0 / .9);
    --glow-gold: 0 0 0 1px rgb(255 214 120 / .55), 0 0 18px -2px rgb(245 190 80 / .55);
    --glow-jade: 0 0 0 1px rgb(120 230 170 / .45), 0 0 16px -2px rgb(80 200 140 / .45);

    /* Materials */
    --grad-gold: linear-gradient(180deg, #fff0bf 0%, #f8d67c 22%, #eeb850 62%, #d8932f 100%);
    --grad-gold-pressed: linear-gradient(180deg, #f2d27f 0%, #e3a842 60%, #c88429 100%);
    --grad-jade: linear-gradient(180deg, #3d7a5e 0%, #2a6049 55%, #1f4d3a 100%);
    --grad-btn: linear-gradient(180deg, #24503e, #1b4132);
    --surface-disabled: #173528;
    --grad-jade-plate: linear-gradient(180deg, #2f604a 0%, #24503d 55%, #1f4636 100%);
    --gold-edge: #7d4d13;
    --gold-rim: #ffe9ad;
    --sh-plate-gold: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -2px 0 rgb(160 95 20 / .32), 0 3px 0 var(--gold-edge), 0 8px 18px -8px rgb(240 170 60 / .6);
    --sh-plate-jade: inset 0 1px 0 rgb(255 255 255 / .1), 0 2px 0 rgb(3 12 8 / .75), 0 6px 14px -8px rgb(0 0 0 / .7);
    --grad-panel: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / 0) 42%);
    --grad-card: linear-gradient(165deg, #183f30 0%, #113126 100%);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .9 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --dur-4: 480ms;

    /* Shell geometry */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-h: 56px;
    --dock-h: 64px;
    --dock-height: var(--dock-h);
    --frame-max: 500px;
    --tap: 44px;

    /* Z stack */
    --z-stage-ui: 4;
    --z-sheet: 20;
    --z-header: 32;
    --z-dock: 30;
    --z-banner: 45;
    --z-toast: 60;
    --z-connection: 80;
    --z-splash: 90;
  }

  .rarity-common { --rarity: var(--rarity-common); }
  .rarity-uncommon { --rarity: var(--rarity-uncommon); }
  .rarity-rare { --rarity: var(--rarity-rare); }
  .rarity-epic { --rarity: var(--rarity-epic); }
  .rarity-legendary { --rarity: var(--rarity-legendary); }
  .rarity-mythic { --rarity: var(--rarity-mythic); }
  .rarity-exotic { --rarity: var(--rarity-exotic); }

  @media (max-height: 640px) {
    :root { --header-h: 50px; --dock-h: 58px; --gutter: 10px; }
  }
}