/*
 * tokens.css — the single source of truth for Blockwork's look.
 *
 * Everything visual in the editor reads from these custom properties. To
 * re-theme the whole app, change the values here and nothing else. Want a
 * light theme later? Override these under a `[data-theme="light"]` selector.
 */

:root {
  /* ---- Core palette (default dark theme) ---- */
  --color-bg: #0f172a;        /* app background        (slate-900) */
  --color-surface: #1e293b;   /* panels, toolbars      (slate-800) */
  --color-surface-2: #334155; /* raised controls       (slate-700) */
  --color-text: #f1f5f9;      /* primary text          (slate-100) */
  --color-muted: #94a3b8;     /* secondary text        (slate-400) */
  --color-border: #334155;    /* hairlines, dividers   (slate-700) */
  --color-accent: #6366f1;    /* primary actions       (indigo-500) */
  --color-accent-2: #14b8a6;  /* secondary highlight   (teal-500) */
  --color-danger: #ef4444;    /* destructive / errors  (red-500) */

  /* Derived states (kept here so theming stays a one-stop edit). */
  --color-accent-hover: #818cf8;
  --color-danger-hover: #f87171;
  --color-focus-ring: #818cf8;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* ---- Shape & type ---- */
  --radius: 8px;
  --radius-sm: 4px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 4px 16px rgb(0 0 0 / 0.35);
}