/* Design tokens — §7.1 of the master spec. Exact values, do not drift. */

:root {
  /* color */
  --bg:            #FAFAF9;   /* app background — warm paper */
  --surface:       #FFFFFF;   /* cards, tables, panels */
  --surface-2:     #F4F4F1;   /* subtle fills, hover */
  --border:        #E7E5E0;   /* hairlines everywhere */
  --border-strong: #D6D3CC;
  --ink:           #1C1B18;   /* primary text */
  --ink-2:         #57544C;   /* secondary text */
  --ink-3:         #8B877C;   /* muted / captions */
  --accent:        #E4572E;   /* persimmon — primary actions, gates */
  --accent-soft:   #FDF0EB;
  --ok:            #0F7B6C;   /* teal — success, agent */
  --ok-soft:       #EAF5F3;
  --info:          #4169A8;   /* tools / links */
  --info-soft:     #EEF3FA;
  --warn:          #B7791F;   /* storage / watch-items */
  --warn-soft:     #FBF4E6;
  --danger:        #C0392B;
  --danger-soft:   #FBEAE8;
  --violet:        #7C5CBF;   /* client stage */
  --violet-soft:   #F3EFFA;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px;

  /* shape & elevation */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(28,27,24,.05);
  --shadow-2: 0 1px 3px rgba(28,27,24,.07), 0 4px 12px rgba(28,27,24,.05);
  --shadow-3: 0 4px 8px rgba(28,27,24,.08), 0 12px 32px rgba(28,27,24,.10);

  /* layout */
  --sidebar-w: 224px;
  --agent-w: 40%;           /* agent panel share of main area */
  --topbar-h: 52px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
}