/* Design tokens — colours, typography, spacing. Reference these via
   var(--name) from layout.css and components.css; never hard-code. */

:root {
  --fg: #222;
  --muted: #888;
  --bg: #fff;
  --bg-alt: #f4f5f7;
  --border: #e0e0e0;
  --accent: #2563eb;
  --selected: #dbeafe;
  --shadow: #999;

  /* Agent-driven highlight (ui_highlight over the live channel). Amber,
     so it reads as distinct from the user's blue selection. */
  --agent-highlight: #fde68a;
  --agent-highlight-stroke: #d97706;

  /* Brand red — toned down from the favicon's #ea1b23 to a calmer
     red-700 shade that sits naturally alongside the other -600/-700
     palette values. Used by the header action buttons; kept distinct
     from --accent so arcs/selection (blue) stay readable as
     scaffolding rather than branding. */
  --brand: #b91c1c;

  /* Arc-type colour families. Three semantic hues, one per
     directional category — same idea as the "tree of cards"
     palette in the reference screenshot. Saturated -600 shades for
     accents (borders, icons, chips); -100 tints for soft fills. */
  --arc-up:        #16a34a;  /* green-600  — IsOf, IsA */
  --arc-up-soft:   #dcfce7;  /* green-100 */
  --arc-down:      #ea580c;  /* orange-600 — Has, Describes */
  --arc-down-soft: #ffedd5;  /* orange-100 */
  --arc-side:      #2563eb;  /* blue-600   — MutualHas (shares family with accent) */
  --arc-side-soft: #dbeafe;  /* blue-100 */
  --arc-quiet:     #64748b;  /* slate-500  — SameAs, Deleted, fallback */
  --arc-quiet-soft:#e2e8f0;  /* slate-200 */

  /* Role chips in the detail arcs table. Mirror the arc families
     where the mapping is natural (concept → up-green, label →
     side-blue, other → quiet-grey); digest gets its own amber so
     it's distinguishable from a label at a glance — both arrive on
     `MutualHas` arcs and would otherwise look identical. */
  --role-concept: var(--arc-up);
  --role-label:   var(--arc-side);
  --role-digest:  #ca8a04;     /* amber-600 */
  --role-other:   var(--arc-quiet);

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size: 14px;
  --font-size-small: 0.85em;

  --radius: 3px;
  --space-xs: 0.2em;
  --space-sm: 0.4em;
  --space-md: 0.6em;
  --space-lg: 1em;
}

body {
  font-family: var(--font-ui);
  font-size: var(--font-size);
  color: var(--fg);
  background: var(--bg);
}