/* ============================================================
   BuildAI — Design Tokens
   DARK-ONLY. No light mode. No theme toggle.
   All values consumed via CSS custom properties.
   No raw hex values outside this file.
   ============================================================ */

:root {

  /* === Colors === */
  --color-bg: #0a0a0a;
  --color-surface-1: #111111;
  --color-surface-2: #161616;
  --color-surface-3: #1a1a1a;
  --color-surface-4: #222222;
  --color-border: #2a2a2a;
  --color-border-subtle: #1e1e1e;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #888888;
  --color-text-muted: #555555;
  --color-accent-r: #ff3366;
  --color-accent-g: #33ff99;
  --color-accent-b: #3366ff;
  --color-warning: #f5a623;
  --color-warning-bg: rgba(245, 166, 35, 0.08);
  --color-success: #33ff99;
  --color-success-bg: rgba(51, 255, 153, 0.08);
  --color-danger: #ff3366;
  --color-danger-bg: rgba(255, 51, 102, 0.08);
  --color-info: #3366ff;
  --color-info-bg: rgba(51, 102, 255, 0.08);
  --accent-gradient: linear-gradient(135deg, #ff3366 0%, #3366ff 50%, #33ff99 100%);
  --accent-gradient-hover: linear-gradient(135deg, #ff1f55 0%, #1f55ff 50%, #1fff88 100%);

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* === Typography === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.8;

  /* === Border Radius === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-focus-b: 0 0 0 3px rgba(51,102,255,0.35);
  --shadow-focus-r: 0 0 0 3px rgba(255,51,102,0.35);

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;

  /* === Layout Dimensions === */
  --topbar-h: 48px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 48px;
  --builder-sidebar-w: 260px;
  --builder-preview-w: 400px;
  --builder-preview-w-min: 280px;
  --builder-preview-w-max: 600px;

  /* === Z-index Scale === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-tooltip: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-command-palette: 600;
  --z-context-menu: 700;
  --z-splash: 9999;
}

/* === Keyframes === */

@keyframes skeleton-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1; }
}

@keyframes draw-stroke {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes confetti-fly {
  0%   { transform: translateY(0)      rotate(0deg);   opacity: 1; }
  100% { transform: translateY(-180px) translateX(var(--x, 40px)) rotate(720deg); opacity: 0; }
}

@keyframes shimmer-scan {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.12; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40%           { transform: scale(1); opacity: 1; }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes progress-indeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { left: 100%; width: 40%; }
  100% { left: 100%; width: 40%; }
}

@keyframes typing-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

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