/**
 * DevBlanket UI Design Tokens
 *
 * Shared CSS variables for all services.
 * All variables are prefixed with --ui- to avoid conflicts.
 *
 * Usage:
 *   <link rel="stylesheet" href="https://ui.devblanket.com/css/tokens.css">
 */

:root {
  /* ========== Colors - Backgrounds ========== */
  --ui-bg-primary: #1e1e1e;
  --ui-bg-secondary: #252526;
  --ui-bg-tertiary: #2d2d30;
  --ui-bg-hover: #3c3c3c;

  /* ========== Colors - Text ========== */
  --ui-text-primary: #cccccc;
  --ui-text-secondary: #858585;
  --ui-text-muted: #6e6e6e;

  /* ========== Colors - Semantic ========== */
  --ui-accent: #0078d4;
  --ui-accent-hover: #1a8cff;
  --ui-success: #4ec9b0;
  --ui-error: #f14c4c;
  --ui-warning: #cca700;
  --ui-border: #3c3c3c;

  /* ========== Spacing ========== */
  --ui-space-xs: 4px;
  --ui-space-sm: 8px;
  --ui-space-md: 16px;
  --ui-space-lg: 24px;
  --ui-space-xl: 32px;

  /* ========== Typography ========== */
  --ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --ui-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', monospace;
  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.875rem;
  --ui-font-size-base: 1rem;
  --ui-font-size-lg: 1.125rem;
  --ui-font-size-xl: 1.25rem;
  --ui-font-weight-normal: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-line-height: 1.5;

  /* ========== Borders ========== */
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-xl: 16px;
  --ui-radius-full: 50%;

  /* ========== Shadows ========== */
  --ui-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* ========== Transitions ========== */
  --ui-transition-fast: 0.1s ease;
  --ui-transition-base: 0.15s ease;
  --ui-transition-slow: 0.3s ease;

  /* ========== Z-Index Scale ========== */
  --ui-z-dropdown: 100;
  --ui-z-sticky: 200;
  --ui-z-fixed: 300;
  --ui-z-modal-backdrop: 400;
  --ui-z-modal: 500;
  --ui-z-popover: 600;
  --ui-z-tooltip: 700;

  /* ========== Avatar Colors ========== */
  --ui-avatar-1: #e17055;
  --ui-avatar-2: #00b894;
  --ui-avatar-3: #0984e3;
  --ui-avatar-4: #6c5ce7;
  --ui-avatar-5: #fd79a8;
  --ui-avatar-6: #e84393;
  --ui-avatar-7: #00cec9;
  --ui-avatar-8: #fdcb6e;
  --ui-avatar-9: #74b9ff;
  --ui-avatar-10: #a29bfe;

  /* ========== Component-Specific Defaults ========== */
  --ui-sidebar-width: 240px;
  --ui-org-bar-width: 56px;
  --ui-avatar-size-sm: 24px;
  --ui-avatar-size-md: 32px;
  --ui-avatar-size-lg: 40px;
  --ui-avatar-size-xl: 56px;

  /* ========== Chat Bubble ========== */
  --ui-bubble-user-bg: #2a2a2e;
  --ui-bubble-ai-border: #5c2d91;
  --ui-bubble-system-color: var(--ui-text-muted);
  --ui-chat-bubble-max-width: 600px;
  --ui-chat-bubble-radius: 12px;
  --ui-chat-avatar-size: 36px;
}