/* ============================================================
 * Kethran theme tokens — Phase 0 of the UI redesign.
 *
 * Every panel reads colours / fonts / radii through these CSS
 * custom properties. applyTheme() at runtime overwrites the
 * values to flip the active theme without any panel code change.
 *
 * Defaults below match V2 Baseline so a page that boots before
 * applyTheme runs still renders sanely.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --bg: #0a0f1c;
  --panel: rgba(14, 22, 38, 0.88);
  --panel-hi: rgba(20, 32, 52, 0.92);
  --panel-deep: rgba(8, 14, 24, 0.95);
  --panel-bg: rgba(14, 22, 38, 0.88);

  --border: rgba(120, 180, 255, 0.18);
  --border-strong: rgba(120, 180, 255, 0.32);

  /* Text */
  --text: #e6edf7;
  --text-dim: rgba(220, 232, 250, 0.55);
  --text-faint: rgba(220, 232, 250, 0.32);

  /* Roles */
  --accent: #5fb8ff;
  --accent-dim: rgba(95, 184, 255, 0.18);
  --warn: #f5b342;
  --warn-dim: rgba(245, 179, 66, 0.10);
  --good: #4ed8a3;
  --bad: #ff6b7a;
  --purple: #c178ff;

  /* Geometry */
  --radius: 8px;
  --radius-sm: 3px;
  --blur: blur(10px);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  /* Type */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-header: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --header-weight: 600;
  --header-letter: 0.6px;

  /* Theme-specific (overridden by individual themes) */
  --portrait-pattern: repeating-linear-gradient(135deg, rgba(95, 184, 255, 0.06) 0 6px, transparent 6px 12px);
  --portrait-grad: rgba(8, 14, 24, 0.95);
}

/* ── Body bg / text — only when applyTheme has stamped data-theme
 *    on the body (i.e. the game page or the admin themes page with
 *    "Apply to whole admin page" toggled). Login / profile / liveops
 *    / item / recipe / encounter / etc. admin pages keep their
 *    native Tailwind light-mode chrome. ──────────────────────── */
body[data-theme] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body[data-theme="v2-baseline"] {
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(95, 184, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(193, 120, 255, 0.08), transparent 60%),
    var(--bg);
}

/* ── Theme-specific hooks ────────────────────────────────────
 * Most theme work is token swaps via applyTheme(). These hooks
 * cover the few cases that need conditional CSS — corner
 * brackets on Wireframe, light flag on Bone & Plasma, etc.
 * ──────────────────────────────────────────────────────────── */

/* Wireframe Console — corner brackets on portrait + panels */
body[data-corner-bracket="true"] .portrait,
body[data-corner-bracket="true"] .kethran-panel-bracket {
  position: relative;
}
body[data-corner-bracket="true"] .portrait::before,
body[data-corner-bracket="true"] .portrait::after,
body[data-corner-bracket="true"] .kethran-panel-bracket::before,
body[data-corner-bracket="true"] .kethran-panel-bracket::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
body[data-corner-bracket="true"] .portrait::before,
body[data-corner-bracket="true"] .kethran-panel-bracket::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
body[data-corner-bracket="true"] .portrait::after,
body[data-corner-bracket="true"] .kethran-panel-bracket::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

/* Light theme flag — Bone & Plasma. Flips contrast helpers. */
body[data-light="true"] {
  /* Light themes override individual tokens via applyTheme; this
   * hook is for the rare CSS that needs a light/dark switch. */
}

/* Force-mono — Wireframe Console. Body text uses mono too. */
body[data-force-mono="true"] {
  font-family: var(--font-mono);
}

/* Glow flag — only when accents should box-shadow. Read at the
 * atom-component level to decide whether to apply glow. */
body[data-glow="false"] .kethran-glow {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ============================================================
 * Atom component baseline (Phase 2 fills these out)
 * Below are stubs so Phase 0 can ship without a 404 on the
 * shell.css import.
 * ============================================================ */

/* Region pill — see atoms.css (Phase 2) for the real styles */
.kethran-pill {
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* Tab header */
.kethran-tab-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* Brownout chip */
.kethran-chip-warn {
  background: var(--panel);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: var(--radius-sm);
}