/* =============================================================================
   ve-tokens.css: the Vibe EDI design tokens, ONE source for every UI.
   Canonical copy: design/ve-tokens.css. Byte-identical copies live in
   apps/vibemapping/static/css/ve-tokens.css and inside the tenant console
   (packages/agent/.../static/index.html, between the VE-TOKENS markers),
   refreshed by scripts/sync-ve-design.py and pinned by test_ve_design_sync.py.
   Light is the default; dark applies under prefers-color-scheme unless the
   page chose a theme, or when [data-theme=dark] / body.theme-dark is set.
   ============================================================================= */
:root {
  /* color */
  --ve-bg:#FFFFFF; --ve-surface:#FFFFFF; --ve-surface-2:#F5F5F5;
  --ve-ink:#0A0A0A; --ve-muted:#6B6B6B;
  --ve-line:#E5E5E5; --ve-line-strong:#D4D4D4;
  --ve-primary:#171717; --ve-primary-2:#262626; --ve-primary-ink:#FAFAFA;
  --ve-accent:#171717;
  --ve-nav:#FFFFFF; --ve-hover:#F5F5F5; --ve-faint:#8A8A8A; --ve-danger-ink:#FFFFFF;
  --ve-ok:#3F6B4E; --ve-warn:#7A5A1E; --ve-err:#B42318; --ve-info:#404040; --ve-check:#2563EB;
  --ve-ok-bg:#3F6B4E14; --ve-warn-bg:#7A5A1E14; --ve-err-bg:#B4231812; --ve-info-bg:#F5F5F5;
  --ve-focus:0 0 0 1px #FFFFFF, 0 0 0 3px #A1A1A1;
  --ve-grid:transparent; --ve-wash:transparent;
  /* type */
  --ve-display:'Inter',system-ui,sans-serif;
  --ve-sans:'Inter',system-ui,sans-serif;
  --ve-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ve-t-display:600 40px/1.1 var(--ve-display);
  --ve-t-h1:600 28px/1.15 var(--ve-display);
  --ve-t-h2:500 18px/1.3 var(--ve-display);
  --ve-t-h3:500 13px/1.3 var(--ve-sans);
  --ve-t-body:400 14px/1.55 var(--ve-sans);
  --ve-t-small:400 12.5px/1.45 var(--ve-sans);
  --ve-t-mono:400 12.5px/1.5 var(--ve-mono);
  /* spacing (4px base) */
  --ve-s-1:4px; --ve-s-2:8px; --ve-s-3:12px; --ve-s-4:16px; --ve-s-5:20px;
  --ve-s-6:24px; --ve-s-7:32px; --ve-s-8:40px; --ve-s-9:48px; --ve-s-10:64px;
  /* shape / depth / motion / layers */
  --ve-r-sm:6px; --ve-r:8px; --ve-r-lg:8px; --ve-r-pill:999px;
  --ve-shadow-1:none; --ve-shadow-2:0 1px 2px #0A0A0A0F;
  --ve-ease:cubic-bezier(.2,.7,.2,1); --ve-dur:180ms; --ve-dur-in:420ms;
  --ve-z-nav:20; --ve-z-drawer:40; --ve-z-dialog:60; --ve-z-toast:80;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Midnight Slate + Indigo */
    --ve-bg:#0B1120; --ve-nav:#0F172A; --ve-surface:#172033; --ve-surface-2:#1E293B; --ve-hover:#243149;
    --ve-ink:#F1F5F9; --ve-muted:#94A3B8; --ve-faint:#64748B;
    --ve-line:#334155; --ve-line-strong:#475569;
    --ve-primary:#818CF8; --ve-primary-2:#A5B4FC; --ve-primary-ink:#0B1120; --ve-accent:#818CF8;
    --ve-danger-ink:#0B1120;
    --ve-ok:#34D399; --ve-warn:#FBBF24; --ve-err:#FB7185; --ve-info:#38BDF8; --ve-check:#818CF8;
    --ve-ok-bg:#34D3991A; --ve-warn-bg:#FBBF241A; --ve-err-bg:#FB71851A; --ve-info-bg:#38BDF81A;
    --ve-focus:0 0 0 1px #0B1120, 0 0 0 3px #818CF8;
    --ve-grid:transparent; --ve-wash:#818CF814;
    --ve-shadow-1:none; --ve-shadow-2:none;
  }
}
:root[data-theme="dark"], body.theme-dark {
  /* Midnight Slate + Indigo */
  --ve-bg:#0B1120; --ve-nav:#0F172A; --ve-surface:#172033; --ve-surface-2:#1E293B; --ve-hover:#243149;
  --ve-ink:#F1F5F9; --ve-muted:#94A3B8; --ve-faint:#64748B;
  --ve-line:#334155; --ve-line-strong:#475569;
  --ve-primary:#818CF8; --ve-primary-2:#A5B4FC; --ve-primary-ink:#0B1120; --ve-accent:#818CF8;
  --ve-danger-ink:#0B1120;
  --ve-ok:#34D399; --ve-warn:#FBBF24; --ve-err:#FB7185; --ve-info:#38BDF8; --ve-check:#818CF8;
  --ve-ok-bg:#34D3991A; --ve-warn-bg:#FBBF241A; --ve-err-bg:#FB71851A; --ve-info-bg:#38BDF81A;
  --ve-focus:0 0 0 1px #0B1120, 0 0 0 3px #818CF8;
  --ve-grid:transparent; --ve-wash:#818CF814;
  --ve-shadow-1:none; --ve-shadow-2:none;
}
:focus-visible { outline:2px solid #A1A1A1; outline-offset:2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color:#818CF8; } }
:root[data-theme="dark"] :focus-visible, body.theme-dark :focus-visible { outline-color:#818CF8; }
@keyframes ve-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                           transition-duration:.01ms !important; }
}