/**
 * Matrix Design Tokens — unified CSS custom properties for all Matrix webapps.
 *
 * Based on Chat's --mx-color-* system, extended with layout and typography tokens.
 * Import this in your app root or let <mx-app-shell> inject it automatically.
 *
 * Usage in components:
 *   background: var(--mx-color-surface);
 *   color: var(--mx-color-text);
 *   border: 1px solid var(--mx-color-border);
 */

:root {
  /* ── Surface colors ────────────────────────────────────────────────── */
  --mx-color-surface:        #0f172a;
  --mx-color-surface-alt:    #1e293b;
  --mx-color-surface-inset:  #020617;
  --mx-color-surface-hover:  #334155;
  --mx-color-surface-card:   #16213e;

  /* ── Text colors ───────────────────────────────────────────────────── */
  --mx-color-text:           #f1f5f9;
  --mx-color-text-secondary: #94a3b8;
  --mx-color-text-muted:     #475569;
  --mx-color-link:           #82aaff;

  /* ── Semantic colors ───────────────────────────────────────────────── */
  --mx-color-primary:        #3b82f6;
  --mx-color-primary-hover:  #60a5fa;
  --mx-color-accent:         #e94560;
  --mx-color-success:        #22c55e;
  --mx-color-warning:        #f59e0b;
  --mx-color-danger:         #ef4444;
  --mx-color-error:          #ef4444;

  /* ── Border colors ─────────────────────────────────────────────────── */
  --mx-color-border:         #334155;
  --mx-color-border-light:   #1e293b;
  --mx-color-focus-ring:     #3b82f6;

  /* ── Typography ────────────────────────────────────────────────────── */
  --mx-font-family:          system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-font-mono:            'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --mx-font-size-xs:         10px;
  --mx-font-size-sm:         11px;
  --mx-font-size-base:       13px;
  --mx-font-size-md:         14px;
  --mx-font-size-lg:         18px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --mx-radius-sm:            3px;
  --mx-radius-md:            6px;
  --mx-radius-lg:            8px;
  --mx-radius-full:          9999px;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --mx-space-xs:             4px;
  --mx-space-sm:             8px;
  --mx-space-md:             12px;
  --mx-space-lg:             16px;
  --mx-space-xl:             20px;

  /* ── Scrollbar ─────────────────────────────────────────────────────── */
  --mx-scrollbar-width:      6px;
  --mx-scrollbar-track:      var(--mx-color-surface-inset);
  --mx-scrollbar-thumb:      var(--mx-color-border);
  --mx-scrollbar-thumb-hover: var(--mx-color-border-light);
}
