/**
 * tokens.css — the PocketVerse design tokens for the canvas half.
 *
 * One look for the whole app: the same palette, accent and type as the wall
 * (board/board.css) — light by default, dark under [data-theme="dark"]. The
 * names are the ones app.css has always used; only the values are shared now.
 * Zero hardcoded values outside this file.
 */

:root {
  /* ─── Colors: Background ──────────────────────────────── */
  --color-bg:            #eef2f7;
  --color-bg-surface:    #ffffff;
  --color-bg-raised:     #f4f7fb;
  --color-bg-overlay:    rgba(238, 242, 247, 0.94);
  --color-bg-card:       #ffffff;

  /* ─── Colors: Text ────────────────────────────────────── */
  --color-text:          #111827;
  --color-text-muted:    #6b7280;
  --color-text-dim:      #9ca3af;

  /* ─── Colors: Accent (the wall's amber) ───────────────── */
  --color-accent:        #f59e0b;
  --color-accent-ink:    #7c2d12;
  --color-accent-soft:   rgba(245, 158, 11, 0.16);
  --color-gold:          #f59e0b;
  --color-teal:          #b45309;          /* the old name for "the link/active colour" */
  --color-link:          #b45309;
  --color-border:        rgba(17, 24, 39, 0.10);
  --color-border-focus:  #f59e0b;

  /* ─── Colors: Status ──────────────────────────────────── */
  --color-connected:     #16a34a;
  --color-disconnected:  #dc2626;
  --color-pending:       #f59e0b;

  /* ─── Typography — the system stack, like the wall ────── */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, 'JetBrains Mono', monospace;
  --font-display: var(--font-sans);

  --text-xs:   0.7rem;
  --text-sm:   0.82rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Spacing ─────────────────────────────────────────── */
  --space-xs:  0.3rem;
  --space-sm:  0.5rem;
  --space-md:  0.8rem;
  --space-lg:  1.2rem;
  --space-xl:  1.5rem;

  /* ─── Borders & Radius ────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* ─── Layout ──────────────────────────────────────────── */
  --topbar-height: 44px;

  /* ─── Transitions ─────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.25s ease;

  /* ─── Z-index ─────────────────────────────────────────── */
  --z-canvas:  0;
  --z-topbar:  9999;
  --z-overlay: 10000;

  color-scheme: light;
}

/* ── Dark — the wall's dark, same accent a shade lighter ───────────── */
[data-theme="dark"] {
  --color-bg:            #0f1420;
  --color-bg-surface:    #161d2b;
  --color-bg-raised:     #1e2636;
  --color-bg-overlay:    rgba(15, 20, 32, 0.92);
  --color-bg-card:       #161d2b;

  --color-text:          #e8edf6;
  --color-text-muted:    #94a3b8;
  --color-text-dim:      #64748b;

  --color-accent:        #fbbf24;
  --color-accent-ink:    #fde68a;
  --color-accent-soft:   rgba(251, 191, 36, 0.16);
  --color-gold:          #fbbf24;
  --color-teal:          #fbbf24;
  --color-link:          #fbbf24;
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-focus:  #fbbf24;

  --color-connected:     #4ade80;
  --color-disconnected:  #f87171;
  --color-pending:       #fbbf24;

  color-scheme: dark;
}