/* ============================================================
   brand.css — METACALL shared design tokens
   Derived from metatrix33 palette + realrom skeleton colours.
   Import this first in every page.
   ============================================================ */

/* Fonts -------------------------------------------------------- */
@import url('/vendor/fonts/jetbrains-mono.css'); /* self-hosted — no Google Fonts egress */

/* If Google Fonts is blocked (offline / Quest browser) the
   system stack ui-monospace → SF Mono → Menlo → Consolas covers it. */

:root {
  /* ── Core palette (metatrix33 skeleton) ───────────────────── */
  --bg:        #0b0b10;
  --bg2:       #11111a;
  --bg-card:   #0f0f18;
  --bg-faint:  #0d0d15;
  --ink:       #f5efe2;
  --ink-soft:  #d0c8bb;
  --ink-dim:   #8a8478;
  --ink-faint: #55504a;
  --line:      rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --muted:     #b9b3a4;

  /* ── Brand accent ─────────────────────────────────────────── */
  --phosphor:        #39ff14;
  --phosphor-glow:   0 0 8px rgba(57,255,20,0.55), 0 0 20px rgba(57,255,20,0.22);
  --blood:           #FF3B3B;
  --blood-glow:      0 0 8px rgba(255,59,59,0.6), 0 0 22px rgba(220,38,38,0.22);
  --ice:             #3fb6ff;
  --ice-glow:        0 0 8px rgba(63,182,255,0.55), 0 0 22px rgba(63,182,255,0.2);
  --amber:           #ffd58a;
  --amber-glow:      0 0 8px rgba(255,213,138,0.55);
  --magenta:         #ff5cd1;
  --cyan:            #00e5ff;

  /* ── Zone accent colours ──────────────────────────────────── */
  --zone-white:      #39ff14;   /* phosphor green */
  --zone-white-dim:  rgba(57,255,20,0.18);
  --zone-real:       #FF3B3B;   /* blood red */
  --zone-real-dim:   rgba(220,38,38,0.18);
  --zone-public:     #00e5ff;   /* cyan */
  --zone-public-dim: rgba(0,229,255,0.18);

  /* ── Seven chakras (for Max chakra strip) ─────────────────── */
  --crown:  #a66cff;
  --brow:   #5b6cff;
  --throat: #3fb6ff;
  --heart:  #3fe07a;
  --plexus: #ffd93f;
  --sacral: #ff8a3f;
  --root:   #ff3f4f;

  /* ── Typography ───────────────────────────────────────────── */
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, sans-serif;

  /* ── Transitions ──────────────────────────────────────────── */
  --t-fast: 120ms ease;
  --t-mid:  180ms ease;
}

/* Zone overrides — body[data-zone] swaps primary glow --------- */
body[data-zone="white"] { --zone-accent: var(--zone-white); --zone-dim: var(--zone-white-dim); }
body[data-zone="real"]  { --zone-accent: var(--zone-real);  --zone-dim: var(--zone-real-dim);  }
body[data-zone="public"]{ --zone-accent: var(--zone-public);--zone-dim: var(--zone-public-dim);}

/* Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, select, input, textarea { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Focus rings — visible but subtle ---------------------------- */
:focus-visible {
  outline: 2px solid var(--zone-accent, var(--ice));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Reduced-motion global kill switch --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbars (Webkit) ----------------------------------------- */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Typography helpers ------------------------------------------ */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Grain texture overlay (decorative, metatrix brand) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; opacity: 0.025;
}

/* Pill button — used for zone switcher, room pill, etc -------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.50);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  min-height: 28px;
}
.pill:hover { background: rgba(0,0,0,0.70); }
.pill[aria-pressed="true"],
.pill.active {
  background: var(--zone-dim, rgba(57,255,20,0.12));
  border-color: var(--zone-accent, var(--phosphor));
  color: var(--zone-accent, var(--phosphor));
}