/* FlowPilot Design Tokens */

:root {
  /* Colors */
  --fp-color-bg: #f8fafc;
  --fp-color-surface: #ffffff;
  --fp-color-surface-hover: #f1f5f9;
  --fp-color-border: #e2e8f0;
  --fp-color-border-hover: #cbd5e1;
  
  /* Typography Colors */
  --fp-color-text: #0f172a;
  --fp-color-text-muted: #64748b;
  --fp-color-text-light: #94a3b8;
  
  /* Brand / Primary */
  --fp-color-primary: #2563eb;
  --fp-color-primary-hover: #1d4ed8;
  --fp-color-primary-soft: #eff6ff;
  
  /* Accent / AI-native */
  --fp-color-accent: #7c3aed;
  --fp-color-accent-hover: #6d28d9;
  --fp-color-accent-soft: #f5f3ff;
  
  /* Status Colors */
  --fp-color-success: #10b981;
  --fp-color-success-soft: #ecfdf5;
  --fp-color-warning: #f59e0b;
  --fp-color-warning-soft: #fffbeb;
  --fp-color-danger: #ef4444;
  --fp-color-danger-soft: #fef2f2;
  --fp-color-info: #0ea5e9;
  --fp-color-info-soft: #f0f9ff;
  
  /* Badge Status Styles (Custom for FlowPilot statuses) */
  --fp-status-concept-text: #0ea5e9;
  --fp-status-concept-bg: #f0f9ff;
  --fp-status-beta-text: #d97706;
  --fp-status-beta-bg: #fffbeb;
  --fp-status-ready-text: #059669;
  --fp-status-ready-bg: #ecfdf5;
  --fp-status-live-text: #4f46e5;
  --fp-status-live-bg: #e0e7ff;
  --fp-status-deprecated-text: #dc2626;
  --fp-status-deprecated-bg: #fef2f2;
  --fp-status-review-text: #db2777;
  --fp-status-review-bg: #fdf2f8;
  
  /* Accessibility Status Styles */
  --fp-a11y-not-checked-text: #64748b;
  --fp-a11y-not-checked-bg: #f1f5f9;
  --fp-a11y-needs-review-text: #ea580c;
  --fp-a11y-needs-review-bg: #fff7ed;
  --fp-a11y-checked-text: #16a34a;
  --fp-a11y-checked-bg: #f0fdf4;
  --fp-a11y-keyboard-ready-text: #0891b2;
  --fp-a11y-keyboard-ready-bg: #ecfeff;

  /* Typography Sizes */
  --fp-font-size-xs: 0.75rem;     /* 12px */
  --fp-font-size-sm: 0.875rem;    /* 14px */
  --fp-font-size-base: 1rem;      /* 16px */
  --fp-font-size-md: 1.125rem;    /* 18px */
  --fp-font-size-lg: 1.25rem;     /* 20px */
  --fp-font-size-xl: 1.5rem;      /* 24px */
  --fp-font-size-2xl: 1.875rem;   /* 30px */
  --fp-font-size-3xl: 2.25rem;    /* 36px */
  --fp-font-size-4xl: 3rem;       /* 48px */
  
  /* Spacing */
  --fp-space-xs: 4px;
  --fp-space-sm: 8px;
  --fp-space-md: 16px;
  --fp-space-lg: 24px;
  --fp-space-xl: 32px;
  --fp-space-2xl: 48px;
  --fp-space-3xl: 64px;

  /* Radius */
  --fp-radius-card: 16px;
  --fp-radius-input: 10px;
  --fp-radius-button: 8px;
  --fp-radius-badge: 9999px;
  --fp-radius-sm: 6px;

  /* Shadows (Elevation) */
  --fp-shadow-flat: none;
  --fp-shadow-low: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --fp-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --fp-shadow-high: 0 12px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --fp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --fp-transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Interactive States */
  --fp-opacity-hover: 0.85;
  --fp-opacity-active: 0.7;
  --fp-opacity-disabled: 0.5;
  
  /* Density Modifiers */
  --fp-density-padding: 16px;
  --fp-density-gap: 16px;
  --fp-density-input-padding: 10px 14px;
  --fp-density-button-padding: 10px 20px;
}