/* ─── Kingdom Wong Hub — Design Tokens (single source of truth) ───
   All rooms link this file: <link rel="stylesheet" href="../hub-tokens.css">
   or relative: <link rel="stylesheet" href="hub-tokens.css">
   Extracted from kingdom-wong.html:12-45 · 2026-06-11
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Serif+Thai:wght@400;500;600;700&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ── Surfaces ── */
  --bg-base:        #171614;
  --bg-deep:        #0b1b2b;
  --surface:        #1c1b19;
  --surface-2:      #201f1d;
  --surface-raised: #252320;
  --surface-teal:   #0a4d57;

  /* ── Brand accents ── */
  --lantern:        #e8b454;   /* warm hero glow */
  --gold:           #d4a018;   /* identity / headings */
  --gold-ornate:    #caa300;   /* ornate details */
  --teal-accent:    #6bd4d0;   /* secondary accent */
  --cyan:           #00d4ff;   /* action / interactive / KPI numbers */
  --cyan-glow:      #7de4ff;   /* cyan highlight state */

  /* ── Text ── */
  --text-body:      #e9e2d8;
  --text-muted:     #b6b0a9;
  --text-heading:   #f5efe0;
  --text-disabled:  #7a7470;

  /* ── Status ── */
  --status-success: #5dcca0;
  --status-error:   #e85454;
  --status-warn:    #f4c430;

  /* ── Structure ── */
  --border:         #393836;
  --radius:         5px;
  --radius-lg:      10px;
  --sidebar-w:      220px;
  --max-content:    1200px;   /* never stretch widescreen */
  --max-reader:     720px;    /* reader / doc archetype */

  /* ── Decorative ── */
  --gold-line:      1px solid rgba(212, 160, 24, 0.30);
  --lantern-glow:   0 0 40px rgba(232, 180, 84, 0.20);
  --cyan-shadow:    0 0 12px rgba(0, 212, 255, 0.25);

  /* ── Typography ── */
  --font-display:   'Cinzel', 'Noto Serif Thai', Georgia, serif;
  --font-serif:     'EB Garamond', 'Noto Serif Thai', Georgia, serif;
  --font-body:      'Sarabun', 'EB Garamond', Georgia, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;
}

/* ─── Base reset (rooms can opt-in by including this file) ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── Shared utility classes ─── */
.hub-heading { font-family: var(--font-display); color: var(--gold); }
.hub-muted   { color: var(--text-muted); font-size: 12px; }
.hub-badge   { display:inline-block; padding:2px 8px; border-radius:3px; font-size:11px; font-weight:600; letter-spacing:.04em; }
.hub-badge.cyan  { background:rgba(0,212,255,.15); color:var(--cyan); border:1px solid rgba(0,212,255,.25); }
.hub-badge.gold  { background:rgba(212,160,24,.15); color:var(--gold); border:1px solid rgba(212,160,24,.25); }
.hub-badge.green { background:rgba(93,204,160,.15); color:var(--status-success); border:1px solid rgba(93,204,160,.25); }
.hub-badge.red   { background:rgba(232,84,84,.15);  color:var(--status-error);  border:1px solid rgba(232,84,84,.25); }
.hub-card   { background:var(--surface); border:var(--gold-line); border-radius:var(--radius); padding:16px; }
.hub-btn    { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-raised); color:var(--text-body); cursor:pointer; font-family:var(--font-body); font-size:13px; transition:border-color .15s, background .15s; }
.hub-btn:hover { border-color:var(--cyan); background:rgba(0,212,255,.06); }
.hub-btn.primary { border-color:var(--cyan); color:var(--cyan); }
.hub-divider { border:none; border-top:var(--gold-line); margin:12px 0; }