/* ============================================
   Default Design Tokens — fallback values
   Applied to .preview-root, overridden by token-bridge.js
   ============================================ */

.preview-root {
  /* Color primitives — primary */
  --ds-primary-50: #eff6ff;
  --ds-primary-100: #dbeafe;
  --ds-primary-200: #bfdbfe;
  --ds-primary-300: #93c5fd;
  --ds-primary-400: #60a5fa;
  --ds-primary-500: #3b82f6;
  --ds-primary-600: #2563eb;
  --ds-primary-700: #1d4ed8;
  --ds-primary-800: #1e40af;
  --ds-primary-900: #1e3a8a;

  /* Color primitives — secondary */
  --ds-secondary-50: #f0f9ff;
  --ds-secondary-100: #e0f2fe;
  --ds-secondary-200: #bae6fd;
  --ds-secondary-300: #7dd3fc;
  --ds-secondary-400: #38bdf8;
  --ds-secondary-500: #0ea5e9;
  --ds-secondary-600: #0284c7;
  --ds-secondary-700: #0369a1;
  --ds-secondary-800: #075985;
  --ds-secondary-900: #0c4a6e;

  /* Color primitives — accent */
  --ds-accent-50: #fffbeb;
  --ds-accent-100: #fef3c7;
  --ds-accent-200: #fde68a;
  --ds-accent-300: #fcd34d;
  --ds-accent-400: #fbbf24;
  --ds-accent-500: #f59e0b;
  --ds-accent-600: #d97706;
  --ds-accent-700: #b45309;
  --ds-accent-800: #92400e;
  --ds-accent-900: #78350f;

  /* Semantic tokens */
  --ds-color-bg: #ffffff;
  --ds-color-surface: var(--ds-primary-50);
  --ds-color-text: #111827;
  --ds-color-text-muted: #6b7280;
  --ds-color-border: var(--ds-primary-200);
  --ds-color-focus: var(--ds-primary-500);

  /* Semantic — status */
  --ds-color-success: #16a34a;
  --ds-color-warning: #d97706;
  --ds-color-error: #dc2626;
  --ds-color-info: #2563eb;

  /* Typography */
  --ds-font-heading: 'Inter', system-ui, sans-serif;
  --ds-font-body: 'Inter', system-ui, sans-serif;
  --ds-type-scale: 1.25;
  --ds-size-sm: 0.8rem;
  --ds-size-base: 1rem;
  --ds-size-lg: 1.25rem;
  --ds-size-xl: 1.5625rem;
  --ds-size-2xl: 1.9531rem;
  --ds-size-3xl: 2.4414rem;

  /* Shape */
  --ds-radius: 8px;
  --ds-radius-sm: 4px;
  --ds-radius-lg: 12px;
  --ds-radius-full: 9999px;

  /* Shadow */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ds-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --ds-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}