/* ==================================== */
/* CSS VARIABLES - DESIGN SYSTEM        */
/* ==================================== */
:root {
  /* Backgrounds */
  --bg-sidebar: #F9F5F0;
  --bg-sidebar-hover: #F0EBE4;
  --bg-main: #FDFCFA;
  --bg-canvas: #FFFFFF;
  --bg-input: #FFFFFF;

  /* Borders */
  --border-light: #E8E2DA;
  --border-medium: #D4CCC0;

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #8C8C8C;

  /* Accent - Terracotta Claude.ai */
  --accent-primary: #D97757;
  --accent-primary-hover: #C4684A;
  --accent-secondary: #7C6C5C;
  --accent-success: #5D8A66;
  --accent-success-hover: #4D7A56;
  --accent-danger: #C45C5C;
  --accent-danger-hover: #A84C4C;

  /* Anatomical - tons chair neutres */
  --anatomy-surface: rgba(210, 180, 160, 0.12);
  --anatomy-handle: #B89B7A;
  --anatomy-handle-hover: #A08668;

  /* Sizing */
  --sidebar-width: 260px;
  --sidebar-collapsed: 60px;
  --border-radius-pill: 24px;
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-sm: 4px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* Error panel */
.error-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: 12px;
  background: var(--surface-secondary, #fef2f2);
  border: 1px solid var(--border-error, #fecaca);
  text-align: center;
}
.error-panel__icon {
  font-size: 2rem;
}
.error-panel__message {
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
  margin: 0;
}
.error-panel__retry {
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border-error, #fecaca);
  background: white;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
  font-size: 0.85rem;
}
.error-panel__retry:hover {
  background: var(--surface-secondary, #fef2f2);
}