/* 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:      #74837a;   /* AA on the dark grounds — see the note in the light block */

  /* Same value as --fg, under a name no ported widget uses.
   *
   * A ported app's :root becomes #tool-root, which brings its custom properties with it —
   * and seed-map-3d's palette happens to use nine of the names above (--bg, --fg, --line,
   * --surface…). Inside that widget `var(--fg)` is therefore the APP's near-white, not this
   * site's foreground, whatever the page theme is. That is how the seed card ended up
   * painting near-white text on a white field at 1.24:1: the rule asked for --fg and got
   * someone else's.
   *
   * Anything in tool-theme.css that must resolve to THIS site's colour inside a widget has
   * to ask for it by a name the widget cannot have redefined. Keep the two in step. */
  --site-fg:     #e6efe9;

  /* 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;
  --site-fg:     #0b1410;   /* keep in step with --fg — see the note in the dark block */
  /*
   * --fg-dim is a WCAG floor in BOTH themes, not a free choice.
   *
   * Measured on production with alpha composited down to an opaque colour: the light value
   * was #74857b at 3.62:1 on the page ground, and the dark one #64756b at 4.17:1 — both under
   * the 4.5 that 10–13px text needs, on the footer disclaimer, the sidebar section headings
   * and the generated dataset line. Reported as "nhiều chỗ đang mờ quá", and correctly.
   *
   * Both values are the smallest change that clears 4.5 against every ground the token
   * actually sits on, solved for rather than picked: light #65746b reads 4.94 on white and
   * 4.58 on --bg, dark #74837a reads 5.10 / 4.88 / 4.58 on --bg, --surface and --surface-2.
   *
   * A screenshot cannot settle this, and neither can a careless measurement. The first pass
   * of this same sweep "found" a 3.03:1 failure on the active nav link — which was the script
   * dropping the .08 alpha from rgba(16,185,129,.08) and scoring an 8% tint as if it were a
   * solid green pill. Composite the alpha first, and keep a known pair in the run (black on
   * white = 21, #767676 on white = 4.54) so a broken formula announces itself.
   *
   * AND CHECK THE EDGE, not just the deployment. The first release of this fix deployed
   * correctly and did not reach anyone: /css/tokens.css?v=mds5hz answered with the OLD bytes
   * on the custom domain — cf-cache-status HIT, Age climbing — while the same URL on the
   * deployment host, and the same URL with one extra query param, both returned the new file.
   * A request landed in the window between the HTML flip and the asset being live, and
   * `max-age=31536000, immutable` then pinned that mismatch for a year under a hash that had
   * never served anything before. The content hash is not a guarantee on its own; after a
   * CSS deploy, fetch the versioned URL from the real domain and read the bytes back.
   */
  --fg-dim:      #65746b;
  --grass:       #059669;
  --drop:        0 1px 2px rgba(0, 0, 0, 0.10);

  /* --grass-deep and --grass-bright were dark-theme-only, which is the trap this file's own
   * notes warn about, and it had teeth. tool-theme.css paints every "copy"/"primary" button
   * `background: var(--grass-deep); color: var(--grass-bright)`, so on the light theme those
   * buttons kept a near-black green ground under mint text — the residual failures on every
   * tool that has one: ctb-copy-btn, ecalc-ref-filter-btn, atb-copy-btn, atg-copy-btn.
   * `#tool-root a` drew its colour from --grass-bright too, at 1.9:1 on white.
   *
   * Light versions swap the roles: --grass-deep becomes the pale ground and --grass-bright
   * the dark ink on it, so the pair keeps working wherever it is used as a background/text
   * couple, and reads ~7:1 either way round. */
  --grass-bright: #065f46;
  --grass-deep:   #d1fae5;
}

* { 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); }