/* ============================================================
   PipelineX — Design Tokens (F500 SaaS identity)
   Load order is alphabetical in Dash; "01-" loads first.
   All other CSS reads from these CSS variables.
   White-label theming: override [data-theme="..."] block to re-skin.
   ============================================================ */

:root, [data-theme="edh"] {
  /* ── Brand identity (cool-executive: blue + teal/cyan) ───── */
  --brand-primary:       #2563eb;   /* blue-600  */
  --brand-primary-hover: #1d4ed8;   /* blue-700  */
  --brand-primary-soft:  #eff6ff;   /* blue-50   */
  --brand-primary-ink:   #1e3a8a;   /* blue-900  */
  --brand-accent:        #0d9488;   /* teal-600  */
  --brand-accent-soft:   #ccfbf1;   /* teal-100  */
  --brand-gradient:      linear-gradient(120deg, #2563eb 0%, #0d9488 100%);

  /* ── Neutrals (slate scale) ──────────────────────────────── */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* ── Semantic surface mapping (light theme) ──────────────── */
  --bg-app:        var(--slate-50);
  --bg-surface:    #ffffff;
  --bg-surface-2:  var(--slate-50);
  --bg-surface-3:  var(--slate-100);
  --bg-inverted:   var(--slate-900);
  --bg-overlay:    rgba(15, 23, 42, 0.55);

  /* Borders */
  --border-subtle: var(--slate-200);
  --border-base:   var(--slate-300);
  --border-strong: var(--slate-400);
  --border-inverted: rgba(255,255,255,0.10);

  /* Text */
  --text-strong:   var(--slate-900);
  --text-base:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-on-brand: #ffffff;
  --text-on-inverted: rgba(255,255,255,0.92);
  --text-link:     var(--brand-primary);
  --text-link-hover: var(--brand-primary-hover);

  /* Status */
  --success:       #059669;
  --success-soft:  #d1fae5;
  --success-ink:   #064e3b;
  --warning:       #d97706;
  --warning-soft:  #fef3c7;
  --warning-ink:   #78350f;
  --danger:        #dc2626;
  --danger-soft:   #fee2e2;
  --danger-ink:    #7f1d1d;
  --info:          var(--brand-accent);
  --info-soft:     var(--brand-accent-soft);
  --info-ink:      #134e4a;

  /* ── Accent palette (cool-executive — KPIs, categories, charts, status) ── */
  --accent-blue:    #2563eb;  --accent-blue-soft:    #eff6ff;
  --accent-cyan:    #0891b2;  --accent-cyan-soft:    #cffafe;
  --accent-teal:    #0d9488;  --accent-teal-soft:    #ccfbf1;
  --accent-indigo:  #4f46e5;  --accent-indigo-soft:  #eef2ff;
  --accent-sky:     #0ea5e9;  --accent-sky-soft:     #e0f2fe;
  --accent-emerald: #059669;  --accent-emerald-soft: #d1fae5;
  --accent-amber:   #d97706;  --accent-amber-soft:   #fef3c7;
  --accent-rose:    #e11d48;  --accent-rose-soft:    #ffe4e6;
  --accent-violet:  #7c3aed;  --accent-violet-soft:  #f5f3ff;
  --accent-slate:   #475569;  --accent-slate-soft:   #f1f5f9;

  /* Categorical data-viz sequence (charts, stage types) */
  --viz-1: #2563eb;  --viz-2: #0d9488;  --viz-3: #0891b2;  --viz-4: #4f46e5;
  --viz-5: #0ea5e9;  --viz-6: #059669;  --viz-7: #6366f1;  --viz-8: #14b8a6;

  /* Focus (WCAG AA) */
  --focus-ring:    0 0 0 3px rgba(37, 99, 235, 0.35);
  --focus-outline: var(--brand-primary);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-num:  "Inter", system-ui, sans-serif;   /* uses tabular-nums via feature */

  /* Font sizes */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-md:   0.875rem;  /* 14 — body default for product density */
  --fs-base: 0.9375rem; /* 15 — long-form */
  --fs-lg:   1rem;      /* 16 */
  --fs-xl:   1.125rem;  /* 18 */
  --fs-2xl:  1.375rem;  /* 22 */
  --fs-3xl:  1.75rem;   /* 28 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.5;
  --lh-relaxed:1.7;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Spacing (4px base) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10:64px;
  --sp-11:80px;
  --sp-12:96px;

  /* Radius */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* Shadows (soft, layered) */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 20px 40px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.30);

  /* Motion */
  --t-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-h:            56px;
  --sidebar-w:           248px;
  --sidebar-collapsed-w: 64px;
  --content-max:         1440px;
  --content-pad-x:       32px;
  --content-pad-y:       28px;

  /* Z layers */
  --z-base:   1;
  --z-sticky: 100;
  --z-nav:    200;
  --z-header: 300;
  --z-modal:  500;
  --z-toast:  900;

  /* ── Compatibility aliases ───────────────────────────────────
     Marketing templates were authored against an earlier token
     vocabulary (--surface-*, --text-body, --radius-*, --sp-16…).
     These alias the legacy names onto the canonical tokens so every
     page renders consistently. Prefer the canonical names in new code. */
  --surface:        var(--bg-surface);
  --surface-1:      var(--bg-surface);
  --surface-2:      var(--bg-surface-2);
  --surface-3:      var(--bg-surface-3);
  --surface-alt:    var(--bg-surface-2);
  --bg-base:        var(--bg-app);

  --border:         var(--border-subtle);
  --border-default: var(--border-base);

  --text-body:      var(--text-base);
  --text-default:   var(--text-base);
  --text-secondary: var(--text-muted);

  --text-sm:        var(--fs-sm);
  --text-lg:        var(--fs-lg);
  --leading-relaxed:var(--lh-relaxed);

  --radius-md:      var(--r-md);
  --radius-lg:      var(--r-lg);
  --r-full:         var(--r-pill);

  --accent-red:     var(--danger);

  /* Large section rhythm — align oversized paddings to the standard
     section block so banded sections match .section spacing. */
  --sp-16:          var(--sp-12);
  --sp-20:          var(--sp-12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}