/* ============================================================
   gry-rpg.pl — Design Tokens  (v2 — universal RPG hub)
   Direction: warm paper canvas + cool ink-blue accent.
   Light interface, data-first, system-agnostic.
   ============================================================ */

:root {
  /* ---- Surfaces (subtle warm paper — NO texture) ---- */
  --bg:            #f6f3ec;   /* page background, warm off-white */
  --surface:       #fffdf8;   /* card / panel surface */
  --surface-2:     #f0ece2;   /* secondary panel, table head */
  --surface-sunken:#eae4d8;   /* recessed panels, zebra rows */

  /* ---- Ink / text (warm near-black) ---- */
  --ink:    #1c1a15;   /* headings, strongest */
  --text:   #322f28;   /* body */
  --muted:  #6a6556;   /* secondary text */
  --faint:  #9a9483;   /* captions, meta, placeholders */

  /* ---- Borders (warm gray) ---- */
  --border:        #e6e0d3;
  --border-strong: #d6cfbe;
  --border-ink:    #c2b9a4;

  /* ---- Accent: ink-blue (knowledge / trust / system-agnostic) ---- */
  --accent:        #2c5fd0;
  --accent-hover:  #2350bb;
  --accent-press:  #1d44a0;
  --accent-soft:   #e9eefb;   /* tinted background */
  --accent-line:   #cad9f6;   /* tinted border */
  --accent-ink:    #1b3a82;   /* accent text on tint */

  /* ---- Link ---- */
  --link:        #2350bb;
  --link-hover:  #1d44a0;

  /* ---- Semantic status families (badges, alerts — sparingly) ---- */
  --ok:      #2f7d3f;  --ok-soft:    #e3f1e3;  --ok-line:    #c8e3c9;
  --info:    #2a5bc4;  --info-soft:  #e6eefb;  --info-line:  #cbddf6;
  --warn:    #97720d;  --warn-soft:  #f8efd6;  --warn-line:  #ecdca7;
  --danger:  #c0394f;  --danger-soft:#fbe9ec;  --danger-line:#f3d2d8;
  --arcane:  #6b3fc0;  --arcane-soft:#f0e9fb;  --arcane-line:#e0d2f4;
  --neutral: #5c5648;  --neutral-soft:#efe9dd; --neutral-line:#ddd4c3;

  /* threat (entity stat helper — never color-only, always labelled) */
  --threat-low:  #2f7d3f;
  --threat-mid:  #97720d;
  --threat-high: #c0394f;

  /* ============================================================
     PER-SYSTEM / CATEGORY TAG PALETTE
     One calm, evenly-weighted pastel family per slot.
     Assign systems/genres to slots in content; ALWAYS pair with
     a text label — never communicate by colour alone.
     Each slot: --tag-X (bg) / --tag-X-fg (text) / --tag-X-ln (border)
     ============================================================ */
  --tag-slate:#e9edf2; --tag-slate-fg:#44546a; --tag-slate-ln:#d3dbe4;
  --tag-blue: #e6eefb; --tag-blue-fg: #2a57bf; --tag-blue-ln: #cbddf6;
  --tag-indigo:#eaeafa;--tag-indigo-fg:#4747b3;--tag-indigo-ln:#d7d7f1;
  --tag-violet:#f0e9fb;--tag-violet-fg:#6b3fc0;--tag-violet-ln:#e0d2f4;
  --tag-magenta:#fae9f4;--tag-magenta-fg:#ad3183;--tag-magenta-ln:#f1d2e6;
  --tag-rose: #fbe9ec; --tag-rose-fg: #bd384e; --tag-rose-ln: #f3d2d8;
  --tag-orange:#fbeede;--tag-orange-fg:#b25a12;--tag-orange-ln:#f2ddc0;
  --tag-amber:#f8efd6; --tag-amber-fg: #8f6c0c; --tag-amber-ln: #ecdca7;
  --tag-olive:#eef0d8; --tag-olive-fg: #66701f; --tag-olive-ln: #dde0bb;
  --tag-green:#e3f1e3; --tag-green-fg: #2f7d3f; --tag-green-ln: #c8e3c9;
  --tag-teal: #ddf0ef; --tag-teal-fg:  #15736d; --tag-teal-ln:  #bfe2df;
  --tag-cyan: #ddeef5; --tag-cyan-fg:  #1f6a93; --tag-cyan-ln:  #bfdeeb;
  --tag-brown:#efe7df; --tag-brown-fg: #785940; --tag-brown-ln: #ddcdbd;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radius (subtle) ---- */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 7px;  --r-lg: 10px;  --r-xl: 14px;  --r-pill: 999px;

  /* ---- Shadows (minimal, warm-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(40, 32, 18, .05);
  --shadow-md: 0 2px 8px rgba(40, 32, 18, .07);
  --shadow-lg: 0 10px 30px rgba(40, 32, 18, .11);
  --ring: 0 0 0 3px rgba(44, 95, 208, .30);

  /* ---- Type ---- */
  --font-head: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --maxw-prose: 720px;
  --header-h: 64px;

  /* ---- Breakpoints (reference; used in media queries) ---- */
  /* xl 1440  ·  lg 1200  ·  md 1024 (tablet)  ·  sm 768  ·  xs 480 (mobile) */
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.12; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }

/* ---- Type scale utility classes ---- */
.t-display { font-family: var(--font-head); font-weight: 600; font-size: clamp(40px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.015em; color: var(--ink); }
.t-h1   { font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; }
.t-h2   { font-size: 30px; }
.t-h3   { font-size: 22px; }
.t-h4   { font-size: 18px; font-weight: 600; }
.t-lead { font-family: var(--font-ui); font-size: 19px; line-height: 1.55; color: var(--muted); font-weight: 400; }
.t-body { font-size: 16px; }
.t-small{ font-size: 13.5px; color: var(--muted); }
.t-label{ font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.t-mono { font-family: var(--font-mono); font-size: 14px; }
.t-stat { font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ---- Layout helpers ---- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-6); }
.eyebrow { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono  { font-family: var(--font-mono); }
.divider { height: 1px; background: var(--border); border: 0; }