/* ──────────────────────────────────────────────────────────────
 * BS24 v3.4 UI — Design tokens
 * Phase 3 of design spec (docs/ai/design/v3.4/03-components-and-tokens.md)
 *
 * ISOLATION: all new tokens live in :root but prefixed v2-*. Existing
 * v1 variables (--bg, --accent, etc.) in index.html <style> stay
 * untouched. v2 components use v2-* prefix exclusively.
 * ────────────────────────────────────────────────────────────── */

:root {
  /* === SURFACES === */
  --v2-bg:              #ffffff;
  --v2-bg-elevated:     #fafbfc;
  --v2-bg-subtle:       rgba(0,0,0,0.03);
  --v2-hover-bg:        rgba(0,0,0,0.04);
  --v2-surface:         #ffffff;
  --v2-surface-1:       #f8f9fb;
  --v2-surface-2:       #eef0f4;
  --v2-surface-3:       #e2e6ec;
  --v2-border:          #d9dde4;
  --v2-border-strong:   #b8bfc9;

  /* === TEXT === */
  --v2-text-primary:    #1a1d23;
  --v2-text-secondary:  #4b5260;
  --v2-text-tertiary:   #7c8493;
  --v2-text-disabled:   #b8bfc9;
  --v2-text-inverse:    #ffffff;

  /* === SEMANTIC === */
  --v2-primary:         #2563eb;
  --v2-primary-hover:   #1d4ed8;
  --v2-primary-bg:      #eff6ff;

  --v2-success:         #16a34a;
  --v2-success-bg:      #f0fdf4;

  --v2-warning:         #d97706;
  --v2-warning-bg:      #fffbeb;

  --v2-danger:          #dc2626;
  --v2-danger-bg:       #fef2f2;

  --v2-info:            #0891b2;
  --v2-info-bg:         #ecfeff;

  /* === PIPELINE STAGE STATES === */
  --v2-stage-ok:        var(--v2-success);
  --v2-stage-running:   var(--v2-info);
  --v2-stage-warn:      var(--v2-warning);
  --v2-stage-error:     var(--v2-danger);
  --v2-stage-pending:   var(--v2-text-tertiary);
  --v2-stage-skipped:   var(--v2-border-strong);

  /* === CHART (categorical, colour-blind safe) === */
  --v2-chart-1: #2563eb;
  --v2-chart-2: #16a34a;
  --v2-chart-3: #d97706;
  --v2-chart-4: #dc2626;
  --v2-chart-5: #9333ea;
  --v2-chart-6: #0891b2;
  --v2-chart-7: #ea580c;
  --v2-chart-8: #64748b;

  /* === TYPOGRAPHY === */
  --v2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Inter, system-ui, sans-serif;
  --v2-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code",
                  "Roboto Mono", monospace;

  --v2-text-xs:   12px;
  --v2-text-sm:   13px;
  --v2-text-base: 14px;
  --v2-text-md:   16px;
  --v2-text-lg:   20px;
  --v2-text-xl:   24px;
  --v2-text-2xl:  32px;
  --v2-text-3xl:  48px;

  --v2-lh-tight:  1.15;
  --v2-lh-normal: 1.5;
  --v2-lh-loose:  1.75;

  --v2-fw-regular:  400;
  --v2-fw-medium:   500;
  --v2-fw-semibold: 600;
  --v2-fw-bold:     700;

  --v2-tracking-tight:  -0.01em;
  --v2-tracking-normal: 0;
  --v2-tracking-wide:   0.02em;

  /* === SPACING (4pt grid) === */
  --v2-space-0:  0;
  --v2-space-1:  4px;
  --v2-space-2:  8px;
  --v2-space-3:  12px;
  --v2-space-4:  16px;
  --v2-space-5:  20px;
  --v2-space-6:  24px;
  --v2-space-8:  32px;
  --v2-space-10: 40px;
  --v2-space-12: 48px;
  --v2-space-16: 64px;

  /* === RADII === */
  --v2-radius-sm:   4px;
  --v2-radius-md:   6px;
  --v2-radius-lg:   8px;
  --v2-radius-xl:   12px;
  --v2-radius-full: 9999px;

  /* === SHADOWS === */
  --v2-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --v2-shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --v2-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --v2-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --v2-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  --v2-shadow-focus: 0 0 0 3px rgba(37,99,235,0.35);

  /* === MOTION === */
  --v2-duration-instant: 80ms;
  --v2-duration-fast:    150ms;
  --v2-duration-normal:  250ms;
  --v2-duration-slow:    400ms;

  --v2-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --v2-easing-decel:    cubic-bezier(0, 0, 0, 1);
  --v2-easing-accel:    cubic-bezier(0.3, 0, 1, 1);

  /* === Z-INDEX === */
  --v2-z-base:       1;
  --v2-z-dropdown:   100;
  --v2-z-sticky:     200;
  --v2-z-drawer:     300;
  --v2-z-modal:      400;
  --v2-z-popover:    500;
  --v2-z-toast:      600;
  --v2-z-tooltip:    700;
}

/* === DARK MODE === */
/* data-theme="dark" applied to <html> by v2-bootstrap.js based on
 * LocalStorage or system preference. Works independently of v1 body
 * styles (which hard-code dark colors). */
:root[data-theme="dark"] {
  --v2-bg:              #0e1014;
  --v2-bg-elevated:     #161920;
  --v2-bg-subtle:       rgba(255,255,255,0.04);
  --v2-hover-bg:        rgba(255,255,255,0.06);
  --v2-surface:         #12151a;
  --v2-surface-1:       #161920;
  --v2-surface-2:       #1e222b;
  --v2-surface-3:       #282d38;
  --v2-border:          #2d3340;
  --v2-border-strong:   #434c5e;

  --v2-text-primary:    #e8eaed;
  --v2-text-secondary:  #b4bac4;
  --v2-text-tertiary:   #7c8493;
  --v2-text-disabled:   #4b5260;
  --v2-text-inverse:    #0e1014;

  --v2-primary:         #3b82f6;
  --v2-primary-hover:   #60a5fa;
  --v2-primary-bg:      rgba(59,130,246,0.1);

  --v2-success:         #22c55e;
  --v2-success-bg:      rgba(34,197,94,0.1);

  --v2-warning:         #f59e0b;
  --v2-warning-bg:      rgba(245,158,11,0.1);

  --v2-danger:          #ef4444;
  --v2-danger-bg:       rgba(239,68,68,0.1);

  --v2-info:            #06b6d4;
  --v2-info-bg:         rgba(6,182,212,0.1);
}

/* Reduced motion — auto-apply via prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #bs-v2-root *, #bs-v2-root *::before, #bs-v2-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
