/* ============================================
   miniapp-restyle — phase 2 shim (v2, less aggressive)

   Lessons from v1:
   - Forcing body{background;color !important} broke dark-native apps
     (randomizer, devkit, calc) — their cards + text were designed for
     dark surface + light ink; cream bg + dark ink = invisible content.
   - So v2 only touches what is safe to unify across all apps: FONTS
     and TOKEN ALIASES. Each app keeps its own body paint.
   - Apps that WERE designed light (or want the waktukita look) opt in
     by removing their body background rule.

   Depends on: theme.css (--bg, --surface, --text, --accent, …)
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============ 1. legacy-token aliases ============
   Any --col-*, --gold, --warm, --brand, --paper, --cream token an app
   still resolves points at waktukita's palette instead of the old
   hard-coded hex. Zero visual change if the app doesn't reference the
   alias; new/replaced tokens pick up waktukita colors.
*/
:root {
  /* generic surface roles */
  --col-surface: var(--bg);
  --col-canvas: var(--bg-2);
  --col-card: var(--surface);
  --col-ink: var(--text);
  --col-muted: var(--muted);
  --col-line: var(--border);
  --col-warm: var(--accent);
  --col-warm-soft: var(--accent-soft);
  --col-toggle-bg: var(--surface-2);
  --col-toggle-bd: var(--border);
  --col-toggle-ic: var(--muted);
  --col-scrollbar: var(--border-strong);

  /* devkit / randomizer / calc / paint — kept as aliases only, no !important */
  --pink: var(--accent);
  --danger: var(--crit);
  --accent-glow: var(--accent);
  --gold-light: var(--highlight);
  --olive: var(--good);
  --rust: var(--crit);
}

/* ============ 2. safe font application ============
   Font-family is safe to unify — glyph swap does not depend on color
   contrast. Everything else (bg, color, layout) stays per-app.
*/
body, html {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code, kbd, samp, pre, .mono, [class*="font-mono"] {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============ 3. brand-bar clearance ============
   r48 brand-bar is sticky at top (z-index 9998). App content sits
   below it naturally — this just ensures no app pushes above it.
*/
body > .r48-bar { z-index: 9999; }

/* ============ 4. reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}