/**
 * @file
 * FlowDrop Design Tokens
 *
 * Synced with @d34dman/flowdrop/dist/styles/tokens.css.
 * Semantic-first token system: internal palette (--_*), semantic (--fd-*),
 * component tokens. Override --fd-* for theming.
 *
 * Drupal extensions at end of :root (font-weight, border-width, toolbar).
 */

:root {
  /* =========================================================================
	   INTERNAL PALETTE (Private - not documented for users)
	   Prefix: --_ indicates internal/private tokens
	   ========================================================================= */

  --_gray-1: #fafafc;
  --_gray-2: #f5f5f8;
  --_gray-3: #eaeaef;
  --_gray-4: #dcdce4;
  --_gray-5: #a3a3ad;
  --_gray-6: #71717b;
  --_gray-7: #52525c;
  --_gray-8: #27272b;
  --_gray-9: #18181c;
  --_blue-1: #eff6ff;
  --_blue-2: #3b82f6;
  --_blue-3: #1d4ed8;
  --_green-1: #f0fdf4;
  --_green-2: #22c55e;
  --_green-3: #15803d;
  --_red-1: #fef2f2;
  --_red-2: #ef4444;
  --_red-3: #b91c1c;
  --_amber-1: #fffbeb;
  --_amber-2: #f59e0b;
  --_amber-3: #b45309;
  --_violet-1: #f5f3ff;
  --_violet-2: #8b5cf6;
  --_violet-3: #6d28d9;

  /* =========================================================================
	   SEMANTIC TOKENS (Public API)
	   ========================================================================= */

  --fd-background: #fff;
  --fd-foreground: var(--_gray-9);
  --fd-muted: #f8f8fb;
  --fd-muted-foreground: var(--_gray-6);
  --fd-subtle: #f0f0f5;
  --fd-card: #fff;
  --fd-card-foreground: var(--_gray-9);
  --fd-header: #f5f7fa;
  --fd-header-foreground: var(--_gray-8);
  --fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%);
  --fd-surface-tint: rgb(99, 102, 241, 0.02);
  --fd-border: var(--_gray-4);
  --fd-border-muted: var(--_gray-3);
  --fd-border-strong: var(--_gray-5);
  --fd-ring: var(--_blue-2);
  --fd-node-border: var(--_gray-5);
  --fd-node-border-hover: var(--_gray-6);
  --fd-primary: var(--_blue-2);
  --fd-primary-hover: var(--_blue-3);
  --fd-primary-foreground: #fff;
  --fd-primary-muted: var(--_blue-1);
  --fd-secondary: var(--_gray-2);
  --fd-secondary-hover: var(--_gray-3);
  --fd-secondary-foreground: var(--_gray-9);
  --fd-accent: var(--_violet-2);
  --fd-accent-hover: var(--_violet-3);
  --fd-accent-foreground: #fff;
  --fd-accent-muted: var(--_violet-1);
  --fd-success: var(--_green-2);
  --fd-success-hover: var(--_green-3);
  --fd-success-foreground: #fff;
  --fd-success-muted: var(--_green-1);
  --fd-warning: var(--_amber-2);
  --fd-warning-hover: var(--_amber-3);
  --fd-warning-foreground: var(--_gray-9);
  --fd-warning-muted: var(--_amber-1);
  --fd-error: var(--_red-2);
  --fd-error-hover: var(--_red-3);
  --fd-error-foreground: #fff;
  --fd-error-muted: var(--_red-1);
  --fd-info: var(--_blue-2);
  --fd-info-foreground: #fff;
  --fd-info-muted: var(--_blue-1);

  /* ----- SPACING SCALE ----- */
  --fd-space-0: 0;
  --fd-space-1: 0.25rem;
  --fd-space-2: 0.5rem;
  --fd-space-3: 0.75rem;
  --fd-space-4: 1rem;
  --fd-space-5: 1.25rem;
  --fd-space-6: 1.5rem;
  --fd-space-8: 2rem;
  --fd-space-10: 2.5rem;
  --fd-space-12: 3rem;
  --fd-space-16: 4rem;

  /* ----- BORDER RADIUS ----- */
  --fd-radius-none: 0;
  --fd-radius-sm: 0.25rem;
  --fd-radius-md: 0.375rem;
  --fd-radius-lg: 0.5rem;
  --fd-radius-xl: 0.75rem;
  --fd-radius-2xl: 1rem;
  --fd-radius-full: 9999px;

  /* ----- SHADOWS ----- */
  --fd-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.04), 0 1px 3px rgb(0, 0, 0, 0.06);
  --fd-shadow-md: 0 4px 8px rgb(0, 0, 0, 0.06), 0 2px 4px rgb(0, 0, 0, 0.04);
  --fd-shadow-lg: 0 10px 20px rgb(0, 0, 0, 0.08), 0 4px 8px rgb(0, 0, 0, 0.04);
  --fd-shadow-xl: 0 20px 30px rgb(0, 0, 0, 0.1), 0 8px 16px rgb(0, 0, 0, 0.06);

  /* ----- FONT SIZES ----- */
  --fd-text-xs: 0.75rem;
  --fd-text-sm: 0.875rem;
  --fd-text-base: 1rem;
  --fd-text-lg: 1.125rem;
  --fd-text-xl: 1.25rem;
  --fd-text-2xl: 1.5rem;

  /* ----- TRANSITIONS ----- */
  --fd-transition-fast: 150ms ease;
  --fd-transition-normal: 200ms ease;
  --fd-transition-slow: 300ms ease;

  /* =========================================================================
	   COMPONENT TOKENS
	   ========================================================================= */

  --fd-sidebar-width: 320px;
  --fd-navbar-height: 60px;
  --fd-toolbar-height: 40px;

  /* ----- NODE COLORS (workflow editor ports) ----- */
  --fd-node-emerald: #10b981;
  --fd-node-blue: #2563eb;
  --fd-node-amber: #f59e0b;
  --fd-node-orange: #f97316;
  --fd-node-red: #ef4444;
  --fd-node-pink: #ec4899;
  --fd-node-indigo: #6366f1;
  --fd-node-teal: #14b8a6;
  --fd-node-cyan: #06b6d4;
  --fd-node-lime: #84cc16;
  --fd-node-slate: #64748b;
  --fd-node-purple: #9333ea;
  --fd-node-icon: var(--_gray-9);

  /* ----- EDGE TOKENS ----- */
  --fd-edge-trigger: var(--_gray-9);
  --fd-edge-trigger-hover: var(--_gray-9);
  --fd-edge-trigger-selected: var(--_violet-2);
  --fd-edge-trigger-width: 2px;
  --fd-edge-trigger-width-hover: 3px;
  --fd-edge-tool: var(--_amber-2);
  --fd-edge-tool-hover: var(--_amber-3);
  --fd-edge-tool-selected: var(--_violet-2);
  --fd-edge-data: var(--_gray-5);
  --fd-edge-data-hover: var(--_gray-6);
  --fd-edge-data-selected: var(--_violet-2);
  --fd-edge-loopback: var(--_gray-6);
  --fd-edge-loopback-hover: var(--_gray-7);
  --fd-edge-loopback-selected: var(--_violet-2);
  --fd-edge-loopback-width: 1.5px;
  --fd-edge-loopback-width-hover: 2.5px;
  --fd-edge-loopback-dasharray: 5 5;
  --fd-edge-loopback-opacity: 0.85;

  /* ----- SCROLLBAR ----- */
  --fd-scrollbar-thumb: var(--_gray-4);
  --fd-scrollbar-thumb-hover: var(--_gray-5);
  --fd-scrollbar-track: var(--_gray-2);

  /* ----- BACKDROP / HANDLE ----- */
  --fd-backdrop: rgb(255, 255, 255, 0.8);
  --fd-backdrop-blur: blur(8px);
  --fd-handle-border: #fff;
  --fd-layout-background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);

  /* =========================================================================
	   DRUPAL EXTENSIONS (not in package)
	   ========================================================================= */
  --fd-border-width: 1px;
  --fd-font-weight-normal: 400;
  --fd-font-weight-medium: 500;
  --fd-font-weight-semibold: 600;
  --fd-font-weight-bold: 700;
  --fd-font-family-sans: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --fd-font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", monaco, "Consolas", monospace;
  --fd-line-height-normal: 1.5;
  --fd-letter-spacing-wide: 0.025em;
  --fd-header-height: 4rem;
  /* Drupal admin toolbar */
  --fd-toolbar-tray-height: 40px;
  --fd-node-icon-bg-opacity: 40%;
  --fd-node-icon-bg-opacity-hover: 60%;
}

/* =========================================================================
   DARK MODE
   Enable with: <html data-theme="dark">
   ========================================================================= */

[data-theme="dark"] {
  --fd-background: #1a1a1e;
  --fd-foreground: var(--_gray-2);
  --fd-muted: #242428;
  --fd-muted-foreground: var(--_gray-4);
  --fd-subtle: #2a2a30;
  --fd-card: #222226;
  --fd-card-foreground: var(--_gray-2);
  --fd-header: #1f1f24;
  --fd-header-foreground: var(--_gray-3);
  --fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
  --fd-surface-tint: rgb(99, 102, 241, 0.03);
  --fd-handle-border: rgb(255, 255, 255, 0.9);
  --fd-border: #3a3a40;
  --fd-border-muted: #2e2e33;
  --fd-border-strong: #4a4a52;
  --fd-node-border: #4a4a52;
  --fd-node-border-hover: #5a5a62;
  --fd-node-icon: #fff;
  --fd-primary: #60a5fa;
  --fd-primary-hover: #93c5fd;
  --fd-primary-foreground: var(--_gray-9);
  --fd-primary-muted: rgb(59, 130, 246, 0.12);
  --fd-secondary: #2d2d32;
  --fd-secondary-hover: #3a3a3f;
  --fd-secondary-foreground: var(--_gray-2);
  --fd-accent: #a78bfa;
  --fd-accent-hover: #c4b5fd;
  --fd-accent-foreground: var(--_gray-9);
  --fd-accent-muted: rgb(139, 92, 246, 0.12);
  --fd-success: #4ade80;
  --fd-success-hover: #86efac;
  --fd-success-foreground: var(--_gray-9);
  --fd-success-muted: rgb(34, 197, 94, 0.12);
  --fd-warning: #fbbf24;
  --fd-warning-hover: #fcd34d;
  --fd-warning-foreground: var(--_gray-9);
  --fd-warning-muted: rgb(245, 158, 11, 0.12);
  --fd-error: #f87171;
  --fd-error-hover: #fca5a5;
  --fd-error-foreground: var(--_gray-9);
  --fd-error-muted: rgb(239, 68, 68, 0.12);
  --fd-info: #60a5fa;
  --fd-info-foreground: var(--_gray-9);
  --fd-info-muted: rgb(59, 130, 246, 0.12);
  --fd-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.2);
  --fd-shadow-md: 0 4px 6px rgb(0, 0, 0, 0.25);
  --fd-shadow-lg: 0 10px 15px rgb(0, 0, 0, 0.3);
  --fd-shadow-xl: 0 20px 25px rgb(0, 0, 0, 0.4);
  --fd-scrollbar-thumb: var(--_gray-5);
  --fd-scrollbar-thumb-hover: var(--_gray-4);
  --fd-scrollbar-track: #242428;
  --fd-backdrop: rgb(26, 26, 30, 0.85);
  --fd-edge-trigger: var(--_gray-3);
  --fd-edge-trigger-hover: var(--_gray-2);
  --fd-edge-data: var(--_gray-5);
  --fd-edge-data-hover: var(--_gray-4);
  --fd-edge-loopback: var(--_gray-5);
  --fd-edge-loopback-hover: var(--_gray-4);
  --fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
}
