/* mctoolkit.net — design tokens
 *
 * Revised after RE-ing minecraftmaps.com/tools/enchantments, whose look is markedly
 * better than the first pass here. What they get right, and what changed as a result:
 *
 *   - a near-black GREEN-TINTED ground (#020603), not neutral grey. Minecraft's palette
 *     is green; a neutral background makes any accent look bolted on.
 *   - HAIRLINE translucent borders, rgba(accent, .15), instead of a hard bevel on every
 *     element. Bevels everywhere are what made the first pass read as crude — the bevel
 *     is now reserved for things that should genuinely look like blocks.
 *   - a 2-3px radius rather than 0. Square enough to stay blocky, soft enough not to
 *     look like a 1998 dialog.
 *   - section headings at 12px/700 with ~1.7px tracking. That single rule does more for
 *     perceived polish than any amount of chrome.
 *
 * What did NOT change: the typeface rule. Pixel fonts have no CJK, and ko/ja are our two
 * best-converting locales, so the gaming feel still comes from geometry and colour, never
 * from letterforms. See I18N-AUDIT.md.
 */

:root {
  /* ground — green-tinted black, the way the game's night sky is */
  --bg:          #020603;
  --surface:     #0a0d0b;
  --surface-2:   #101612;
  --surface-3:   #18211c;

  /* borders are hairlines tinted with the accent, not bevels */
  --line:        rgba(16, 185, 129, 0.15);
  --line-strong: rgba(16, 185, 129, 0.34);
  --edge-light:  rgba(255, 255, 255, 0.10);
  --edge-dark:   rgba(0, 0, 0, 0.55);

  /* text */
  --fg:          #e6efe9;
  --fg-muted:    #93a49a;
  --fg-dim:      #64756b;

  /* accents — emerald primary, in-game materials for tool icons and tags */
  --grass:       #10b981;
  --grass-bright:#34d399;
  --grass-deep:  #064e3b;
  --gold:        #f0b429;
  --diamond:     #22d3ee;
  --redstone:    #ef4444;
  --lapis:       #4f74e3;
  --amethyst:    #a78bfa;

  /* geometry */
  --radius: 3px;
  --radius-lg: 4px;
  /* kept for genuinely blocky things — the brand mark, block swatches */
  --bevel: inset 1px 1px 0 var(--edge-light), inset -1px -1px 0 var(--edge-dark);
  --bevel-in: inset -1px -1px 0 var(--edge-light), inset 1px 1px 0 var(--edge-dark);
  --drop: 0 1px 2px rgba(0, 0, 0, 0.5);
  --glow: 0 0 0 1px var(--line-strong), 0 0 18px -6px var(--grass);

  /* type — full-coverage sans, non-Latin fallbacks named explicitly.
   *
   * Every script the site ships in has to be listed. The first pass named KR, JP and Thai
   * and stopped, which left zh and ar to whatever the OS happened to have — fine on a
   * Chinese Windows box, tofu boxes on a machine without a CJK or Arabic face installed.
   * 9minecraft solves the same problem server-side with a per-language webfont class
   * (MCI_Fonts); a static site can just name them all in one stack.
   *
   * "Noto Sans SC" covers Simplified Chinese, "Noto Sans Arabic" covers ar (and pulls the
   * right shaping), and the Microsoft/Apple system faces are listed after each Noto so a
   * machine without Noto still resolves rather than falling through to a box glyph. */
  --font-ui: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui,
             "Noto Sans",
             "Noto Sans KR", "Malgun Gothic",
             "Noto Sans JP", "Yu Gothic", "Hiragino Sans",
             "Noto Sans SC", "Microsoft YaHei", "PingFang SC",
             "Noto Sans Thai", "Leelawadee UI",
             "Noto Sans Arabic", "Segoe UI Arabic", "Geeza Pro",
             sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --sidebar-w: 268px;
}

:root[data-theme="light"] {
  --bg:          #f4f7f5;
  --surface:     #ffffff;
  --surface-2:   #f0f4f1;
  --surface-3:   #e3eae5;
  --line:        rgba(6, 78, 59, 0.14);
  --line-strong: rgba(6, 78, 59, 0.30);
  --edge-light:  rgba(255, 255, 255, 0.9);
  --edge-dark:   rgba(0, 0, 0, 0.14);
  --fg:          #0b1410;
  --fg-muted:    #4a5a51;
  --fg-dim:      #74857b;
  --grass:       #059669;
  --drop:        0 1px 2px rgba(0, 0, 0, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* one faint emerald wash, top-left — enough to stop the black reading as flat */
  background-image: radial-gradient(1100px 520px at 12% -8%, rgba(16, 185, 129, 0.05), transparent 60%);
  background-attachment: fixed;
}

/* ---------- primitives ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-3); }
.btn:active { background: var(--surface); }

.btn-primary {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}
.btn-primary:hover { background: var(--grass); border-color: var(--grass); color: #04120c; }

/* Section eyebrow — the single biggest polish win taken from their UI.
 * Measured off minecraftmaps: 12px / 700 / 1.68px tracking, and crucially coloured
 * ACCENT, not dim grey. Dim grey was the first guess here and it is why the section
 * headers read as disabled rather than as structure. */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.68px;
  text-transform: uppercase; color: var(--grass);
}
/* their small print, e.g. the cost bar labels: 10px / 700 / 1.6px */
.eyebrow-sm {
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fg-dim);
}

.tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-muted);
}
.tag-new { border-color: var(--line-strong); color: var(--grass-bright); background: rgba(16,185,129,.08); }
.tag-hot { border-color: rgba(239,68,68,.35); color: #fca5a5; background: rgba(239,68,68,.08); }