/* ==========================================================================
   vFlow Design Tokens
   EAI / Integration platform — open source. Fiori-based, own identity.
   Personality: modern, developer-friendly, dense, trustworthy.
   Consume in UI5 (Horizon theme overrides), plain CSS, or as a reference
   for Claude Code. All values are light-theme (only theme for v1).
   ========================================================================== */

:root {
  /* ---- Brand: indigo / violet ------------------------------------------ */
  --vf-brand-50:  #F4F2FE;
  --vf-brand-100: #EEE9FC;
  --vf-brand-200: #D6CEF9;
  --vf-brand-300: #B7A8F2;
  --vf-brand-400: #927BEA;
  --vf-brand-500: #6E51E4;
  --vf-brand-600: #5B45E0;   /* primary — buttons, links, active nav */
  --vf-brand-700: #4A37C4;   /* hover */
  --vf-brand-800: #3D2EA0;   /* active / pressed, text-on-subtle */
  --vf-brand-900: #2E2478;

  /* ---- Neutrals: cool grey, faint violet tint -------------------------- */
  --vf-neutral-0:   #FFFFFF;  /* surface / cards */
  --vf-neutral-50:  #F7F8FA;  /* app canvas */
  --vf-neutral-100: #EFF1F5;  /* subtle fill, hover rows */
  --vf-neutral-200: #E3E6ED;  /* borders, dividers */
  --vf-neutral-300: #CFD3DE;  /* strong borders, input outlines */
  --vf-neutral-400: #A6ACBB;  /* disabled text, icons */
  --vf-neutral-500: #7B8194;  /* muted / tertiary text */
  --vf-neutral-600: #5A5F70;  /* secondary text */
  --vf-neutral-700: #3D4150;
  --vf-neutral-800: #262A36;
  --vf-neutral-900: #171A22;  /* primary text */

  /* ---- Semantic status (monitoring is the core use case) --------------- */
  --vf-success:        #1E9E6A;
  --vf-success-bg:     #E7F6EF;
  --vf-success-border: #B7E4CE;

  --vf-warning:        #B26A00;
  --vf-warning-bg:     #FBF0DC;
  --vf-warning-border: #F0D89C;

  --vf-error:          #D64545;
  --vf-error-bg:       #FBEAEA;
  --vf-error-border:   #F3C6C6;

  --vf-info:           #3B6FD1;
  --vf-info-bg:        #E8F0FC;
  --vf-info-border:    #C6D8F5;

  /* ---- Role aliases (use these in UI, not raw scale where possible) ---- */
  --vf-bg:            var(--vf-neutral-50);
  --vf-surface:       var(--vf-neutral-0);
  --vf-surface-sunk:  var(--vf-neutral-100);
  --vf-border:        var(--vf-neutral-200);
  --vf-border-strong: var(--vf-neutral-300);
  --vf-text:          var(--vf-neutral-900);
  --vf-text-secondary:var(--vf-neutral-600);
  --vf-text-muted:    var(--vf-neutral-500);
  --vf-text-disabled: var(--vf-neutral-400);
  --vf-primary:       var(--vf-brand-600);
  --vf-primary-hover: var(--vf-brand-700);
  --vf-primary-active:var(--vf-brand-800);
  --vf-primary-subtle:var(--vf-brand-100);
  --vf-link:          var(--vf-brand-600);
  --vf-focus-ring:    rgba(91, 69, 224, 0.30);

  /* ---- Typography ------------------------------------------------------ */
  --vf-font-sans: "IBM Plex Sans", "72", "Segoe UI", system-ui, -apple-system, sans-serif;
  --vf-font-mono: "IBM Plex Mono", "SF Mono", "Consolas", ui-monospace, monospace;

  --vf-fs-display: 28px;  --vf-lh-display: 34px;  /* page / login hero */
  --vf-fs-h1:      22px;  --vf-lh-h1:      28px;  /* page titles */
  --vf-fs-h2:      18px;  --vf-lh-h2:      24px;  /* section headers */
  --vf-fs-h3:      15px;  --vf-lh-h3:      20px;  /* card / group titles */
  --vf-fs-body:    14px;  --vf-lh-body:    20px;  /* base UI text */
  --vf-fs-sm:      13px;  --vf-lh-sm:      18px;  /* dense tables, meta */
  --vf-fs-caption: 12px;  --vf-lh-caption: 16px;  /* labels, hints */
  --vf-fs-code:    13px;  --vf-lh-code:    20px;

  --vf-fw-regular:  400;
  --vf-fw-medium:   500;
  --vf-fw-semibold: 600;

  /* ---- Spacing — 4px grid ---------------------------------------------- */
  --vf-space-0:   0;
  --vf-space-1:   2px;
  --vf-space-2:   4px;
  --vf-space-3:   8px;
  --vf-space-4:   12px;
  --vf-space-5:   16px;
  --vf-space-6:   20px;
  --vf-space-7:   24px;
  --vf-space-8:   32px;
  --vf-space-9:   40px;
  --vf-space-10:  48px;
  --vf-space-12:  64px;

  /* ---- Radius ---------------------------------------------------------- */
  --vf-radius-xs:   4px;   /* chips, badges */
  --vf-radius-sm:   6px;   /* inputs, buttons */
  --vf-radius-md:   8px;   /* cards, menus */
  --vf-radius-lg:   12px;  /* modals, large panels */
  --vf-radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --vf-shadow-sm:  0 1px 2px rgba(23, 26, 34, 0.06);
  --vf-shadow-md:  0 2px 8px rgba(23, 26, 34, 0.08);
  --vf-shadow-lg:  0 8px 24px rgba(23, 26, 34, 0.10);
  --vf-shadow-focus: 0 0 0 3px var(--vf-focus-ring);

  /* ---- Layout ---------------------------------------------------------- */
  --vf-shell-topbar:  48px;   /* global header height */
  --vf-shell-sidenav: 240px;  /* collapsed: 48px */
  --vf-content-max:   1280px; /* content column cap */
  --vf-control-h:     32px;   /* default control height (buttons, inputs) */
  --vf-control-h-sm:  28px;
  --vf-control-h-lg:  40px;

  /* ---- Motion ---------------------------------------------------------- */
  --vf-ease:        cubic-bezier(0.2, 0, 0.2, 1);
  --vf-dur-fast:    120ms;
  --vf-dur-base:    180ms;
  --vf-dur-slow:    280ms;
}