/**
 * tokens.css
 * Design tokens for HiraNBT Studios.
 *
 * Palette concept: "oxidized copper" — Minecraft's copper block ages from
 * raw orange through a teal-green patina. The editor's two accent colors
 * (copper + patina teal) are drawn straight from that material, instead of
 * a generic single neon accent on black.
 *
 * The per-tag-type colors below are the visual signature of the whole app:
 * every NBT tag type (byte, int, string, compound...) keeps the same color
 * everywhere it appears — sidebar, dashboard cards, tree views, badges.
 */

:root {
  /* Surfaces — graphite with a faint olive undertone, not pure black */
  --bg-base: #1b1e1a;
  --bg-surface: #21251f;
  --bg-surface-2: #292e26;
  --bg-surface-3: #333829;
  --border-subtle: #383d33;
  --border-strong: #4a5140;

  /* Text */
  --text-primary: #ece7db;
  --text-secondary: #b7b3a4;
  --text-muted: #7d8073;

  /* Core accents */
  --accent-copper: #c97c4c;
  --accent-copper-bright: #e0975f;
  --accent-teal: #4e9c8c;
  --accent-teal-bright: #63b8a6;
  --accent-danger: #c15c4a;
  --accent-warning: #d9a441;

  /* Tag-type colors (the signature system) */
  --tag-byte: #d9a441;
  --tag-short: #e0c15c;
  --tag-int: #c97c4c;
  --tag-long: #a85c3e;
  --tag-float: #4e9c8c;
  --tag-double: #3d7d71;
  --tag-string: #7c9c6b;
  --tag-list: #6b8ca3;
  --tag-compound: #8c7ca3;
  --tag-array: #8a8f7c;

  /* Type */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Layout */
  --sidebar-width: 232px;
  --toolbar-height: 52px;
  --statusbar-height: 26px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-med: 240ms;

  /* Elevation + glow — used sparingly: hovered cards, the active sidebar
     item, and the hero's single "selected slot" moment. Copper glow
     reads as an item being highlighted, echoing the inventory-slot
     selection cursor the whole app takes its visual cue from. */
  --shadow-elevated: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --glow-copper: 0 0 0 1px rgba(201, 124, 76, 0.35), 0 0 20px -2px rgba(201, 124, 76, 0.35);

  /* Inventory-slot grid line — the hero and a few chrome surfaces use a
     faint grid of this color to evoke a crafting/inventory grid, the one
     visual motif borrowed directly from the subject matter. */
  --slot-line: rgba(236, 231, 219, 0.05);
}

/* ── Light theme override (5.2) ─────────────────────────────────────
 *
 * The accent colors (copper + patina teal) carry over unchanged — they
 * are the brand signature and read well on both dark and light surfaces.
 * Only surfaces, borders, and text scale are re-mapped here.
 *
 * Applied by themeManager.js via: document.documentElement.setAttribute
 * ("data-theme", "light"). Dark theme has no attribute (default).
 *
 * Palette feel: warm cream paper — echoes the aged paper of old maps and
 * books, keeping the Minecraft / explorer feel without looking clinical.
 * ────────────────────────────────────────────────────────────────── */

[data-theme="light"] {
  /* Surfaces — warm cream with an olive undertone (mirrors dark palette logic) */
  --bg-base:      #f0ede6;
  --bg-surface:   #f7f4ee;
  --bg-surface-2: #ede9e0;
  --bg-surface-3: #e3ded4;
  --border-subtle: #d2cec4;
  --border-strong: #b8b3a8;

  /* Text — inverted from dark; keep olive undertone */
  --text-primary:   #272b25;
  --text-secondary: #555850;
  --text-muted:     #8a8d81;

  /* Elevation + glow — lighter shadow, copper glow same hue */
  --shadow-elevated: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
  --glow-copper: 0 0 0 1px rgba(201, 124, 76, 0.30), 0 0 18px -2px rgba(201, 124, 76, 0.28);

  /* Slot grid line — faint dark on light background */
  --slot-line: rgba(39, 43, 37, 0.06);

  /* Accents deliberately NOT overridden — copper + teal stay identical. */
}