/* ==========================================================================
   Vision — Color tokens
   Base palette + semantic aliases. Values are exact from the Figma file's
   "01 Color Palette / Typography" spec.
   ========================================================================== */

:root {
  /* ---- Neutrals (slate) — the workhorse scale ---------------------------- */
  --vds-neutral-900: #111827;
  --vds-neutral-800: #2D3648; /* primary text + dark/primary button surface */
  --vds-neutral-700: #374151;
  --vds-neutral-600: #3F4C65;
  --vds-neutral-500: #717D96; /* secondary text */
  --vds-neutral-400: #9CA3AF; /* tertiary text / placeholder */
  --vds-neutral-300: #CBD2E0; /* strong borders */
  --vds-neutral-200: #E5E7EB; /* default borders */
  --vds-neutral-100: #F3F4F6;
  --vds-neutral-50:  #F8F9FB; /* app surface */
  --vds-white:       #FFFFFF;

  /* ---- Primary / Blue --------------------------------------------------- */
  --vds-blue-700: #1E40AF;
  --vds-blue-600: #2563EB; /* primary blue action, in-progress */
  --vds-blue-500: #3B82F6;
  --vds-blue-100: #DBEAFE;
  --vds-blue-50:  #EEF2FF;

  /* ---- Success / Green -------------------------------------------------- */
  --vds-green-700: #15803D;
  --vds-green-600: #16A34A;
  --vds-green-500: #22C55E;
  --vds-green-100: #DCFCE7;
  --vds-green-50:  #F0FDF4;

  /* ---- Warning / Amber -------------------------------------------------- */
  --vds-amber-700: #B45309;
  --vds-amber-600: #D97706;
  --vds-amber-500: #F59E0B;
  --vds-amber-100: #FEF3C7;
  --vds-amber-50:  #FFFBEB;

  /* ---- Error / Red ------------------------------------------------------ */
  --vds-red-700: #B91C1C;
  --vds-red-600: #DC2626;
  --vds-red-500: #EF4444;
  --vds-red-100: #FEE2E2;
  --vds-red-50:  #FEF2F2;

  /* ---- Accent / Purple -------------------------------------------------- */
  --vds-purple-600: #4F46E5;
  --vds-purple-500: #6366F1;
  --vds-purple-400: #8B5CF6;
  --vds-purple-100: #EDE9FE;
  --vds-purple-50:  #F5F3FF;

  /* ---- Extra surface tint (used behind toolbars/expanded rows) ---------- */
  --vds-surface-alt: #EDF0F7;

  /* ======================================================================
     Semantic aliases — reference these in product UI, not the raw scale.
     ====================================================================== */
  --vds-bg:              var(--vds-white);
  --vds-surface:         var(--vds-neutral-50);
  --vds-surface-raised:  var(--vds-white);
  --vds-surface-sunken:  var(--vds-surface-alt);

  --vds-border:          var(--vds-neutral-200);
  --vds-border-strong:   var(--vds-neutral-300);

  --vds-text-primary:    var(--vds-neutral-800);
  --vds-text-secondary:  var(--vds-neutral-500);
  --vds-text-tertiary:   var(--vds-neutral-400);
  --vds-text-on-dark:    var(--vds-white);

  /* Primary action = dark slate; a blue accent action also exists */
  --vds-action:          var(--vds-neutral-800);
  --vds-action-hover:    var(--vds-neutral-900);
  --vds-accent:          var(--vds-blue-600);
  --vds-accent-hover:    var(--vds-blue-700);
  --vds-accent-soft:     var(--vds-blue-100);

  --vds-success:         var(--vds-green-600);
  --vds-success-soft:    var(--vds-green-100);
  --vds-warning:         var(--vds-amber-500);
  --vds-warning-soft:    var(--vds-amber-100);
  --vds-danger:          var(--vds-red-500);
  --vds-danger-strong:   var(--vds-red-600);
  --vds-danger-soft:     var(--vds-red-100);

  --vds-focus-ring:      var(--vds-blue-500);
}