/* ============================================================
   VisionCore · Design Tokens v2
   Replaces: backend/static/styles/base.css :root block
   
   FIXES audit issue F1 — undefined --accent / --border now alias
   to the canonical names. Existing CSS keeps working.
   ============================================================ */

:root {
  /* ---- SURFACE · 5 steps (dark) ---- */
  --vc-bg:           #0a0a0a;   /* app background */
  --vc-raise:        #111111;   /* slightly raised */
  --vc-panel:        #161616;   /* panels, sidebars */
  --vc-card:         #1c1c1c;   /* cards, modals */
  --vc-line:         #232323;   /* hairlines */
  --vc-line-soft:    rgba(255,255,255,.04);

  /* ---- INK · text on dark ---- */
  --vc-ink:          #ffffff;
  --vc-ink-2:        #d8d8d8;   /* secondary */
  --vc-ink-3:        #9d9d9d;   /* tertiary */
  --vc-ink-4:        #6d6d6d;   /* muted, captions */
  --vc-ink-5:        #444444;   /* disabled */

  /* ---- BRAND (used sparingly — only 1 gradient) ---- */
  --vc-brand:        #ff2a5f;
  --vc-brand-soft:   #ff8faa;
  --vc-brand-bg:     rgba(255,42,95,.10);
  --vc-brand-line:   rgba(255,42,95,.30);
  --vc-grad-brand:   linear-gradient(135deg, #a461ff 0%, #ff2a5f 100%);

  /* ---- SEMANTIC STATE (semantic-only — never decorative) ---- */
  --vc-info:         #00c6ff;
  --vc-info-soft:    #9bdfff;
  --vc-info-bg:      rgba(0,198,255,.10);

  --vc-success:      #00e676;
  --vc-success-soft: #7fefb3;
  --vc-success-bg:   rgba(0,230,118,.10);

  --vc-warn:         #f09819;
  --vc-warn-soft:    #f3b96b;
  --vc-warn-bg:      rgba(240,152,25,.10);

  --vc-danger:       #ff4444;
  --vc-danger-soft:  #ff8a8a;
  --vc-danger-bg:    rgba(255,68,68,.10);

  /* ---- TYPOGRAPHY ---- */
  --vc-font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --vc-font-display: 'Outfit', sans-serif;
  --vc-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --vc-text-xs:      11px;
  --vc-text-sm:      12.5px;
  --vc-text-base:    13.5px;
  --vc-text-md:      15px;
  --vc-text-lg:      18px;
  --vc-text-xl:      22px;
  --vc-text-2xl:     28px;
  --vc-text-display: 44px;

  /* ---- RADIUS ---- */
  --vc-r-xs:  4px;
  --vc-r-sm:  6px;
  --vc-r-md:  10px;
  --vc-r-lg:  14px;
  --vc-r-xl:  20px;
  --vc-r-pill: 999px;

  /* ---- SPACING ---- */
  --vc-s-1: 4px;
  --vc-s-2: 8px;
  --vc-s-3: 12px;
  --vc-s-4: 16px;
  --vc-s-5: 20px;
  --vc-s-6: 24px;
  --vc-s-7: 32px;
  --vc-s-8: 48px;

  /* ---- Z-INDEX · 5 semantic layers (audit F4 fix) ---- */
  --vc-z-base:    1;
  --vc-z-sticky:  100;
  --vc-z-drawer:  200;
  --vc-z-overlay: 300;
  --vc-z-modal:   400;
  --vc-z-toast:   500;

  /* ---- MOTION ---- */
  --vc-ease:     cubic-bezier(.4, 0, .2, 1);
  --vc-fast:     .15s var(--vc-ease);
  --vc-base:     .25s var(--vc-ease);
  --vc-slow:     .4s var(--vc-ease);

  /* ============================================================
     BACK-COMPAT ALIASES — legacy CSS references the names below
     without definitions, causing silent fallbacks. These aliases
     bridge to the canonical names so we can migrate progressively.
     ============================================================ */
  --accent:           var(--vc-brand);
  --accent-primary:   var(--vc-brand);
  --accent-hover:     var(--vc-brand);
  --accent-purple:    #a461ff;

  --bg-color:         var(--vc-bg);
  --sidebar-bg:       var(--vc-panel);
  --panel-bg:         rgba(255,255,255,0.03);

  --text-color:       var(--vc-ink);
  --text-secondary:   var(--vc-ink-2);
  --text-muted:       var(--vc-ink-3);

  --border:           var(--vc-line);
  --border-color:     var(--vc-line);
  --border-light:     rgba(255,255,255,0.1);

  --hover-bg:         #222222;
  --hover-light:      rgba(255,255,255,0.05);

  --danger:           var(--vc-danger);
  --success:          var(--vc-success);

  --radius-sm: var(--vc-r-sm);
  --radius-md: var(--vc-r-md);
  --radius-lg: var(--vc-r-lg);
  --radius-xl: var(--vc-r-xl);

  --spacing-xs: var(--vc-s-1);
  --spacing-sm: var(--vc-s-2);
  --spacing-md: var(--vc-s-4);
  --spacing-lg: var(--vc-s-6);
  --spacing-xl: var(--vc-s-7);

  --transition-fast:   var(--vc-fast);
  --transition-normal: var(--vc-base);

  --font-primary:  var(--vc-font-sans);
  --font-display:  var(--vc-font-display);
  --text-xs: var(--vc-text-xs);
  --text-sm: var(--vc-text-sm);
  --text-md: var(--vc-text-md);
  --text-lg: var(--vc-text-lg);
  --text-xl: var(--vc-text-xl);
}

/* Body baseline */
html, body {
  background: var(--vc-bg);
  color: var(--vc-ink);
  font-family: var(--vc-font-sans);
  -webkit-font-smoothing: antialiased;
}