@layer base {
  :root {
    /* Brand palette */
    --ds-cream: #ffedd6;
    --ds-cream-50: #fff7ec;
    --ds-sand: #ffe5c5;
    --ds-sand-50: #fff0dd;

    --ds-primary: #ff6738;
    --ds-primary-100: #fea85e;
    --ds-primary-200: #fdd2a3;
    --ds-primary-900: #e85a2f;

    --ds-accent: #b24934;
    --ds-accent-800: #8b3a28;
    --ds-accent-600: #c85943;

    /* Semantic */
    --ds-success: #10b981;
    --ds-warning: #f59e0b;
    --ds-error: #ef4444;
    --ds-info: #3b82f6;

    /* Text */
    --ds-text: #b24934;
    --ds-text-700: rgba(178, 73, 52, 0.8);
    --ds-text-600: rgba(178, 73, 52, 0.6);
    --ds-text-inverse: #fff;

    /* Backgrounds */
    --ds-bg: var(--ds-cream);
    --ds-bg-2: var(--ds-sand);
    --ds-bg-3: var(--ds-cream-50);
    --ds-card: rgba(255, 255, 255, 0.7);
    --ds-overlay: rgba(255, 255, 255, 0.9);

    /* Typography */
    --ds-font-sans: 'Sohne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ds-font-serif: 'Charter', Georgia, 'Times New Roman', serif;
    --ds-font-display: 'Sohne', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Spacing */
    --ds-space-1: 0.5rem;
    --ds-space-2: 1rem;
    --ds-space-3: 1.5rem;
    --ds-space-4: 2rem;
    --ds-space-5: 3rem;

    /* Radii */
    --ds-radius-sm: 0.5rem;
    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 1rem;
    --ds-radius-xl: 1.25rem;
    --ds-radius-2xl: 1.5rem;
    --ds-radius-pill: 9999px;

    /* Shadows */
    --ds-shadow-xs: 0 1px 2px rgba(178, 73, 52, 0.05);
    --ds-shadow-sm: 0 2px 4px rgba(178, 73, 52, 0.05);
    --ds-shadow-md: 0 8px 16px rgba(178, 73, 52, 0.08);
    --ds-shadow-lg: 0 20px 40px rgba(178, 73, 52, 0.1);
    --ds-shadow-xl: 0 30px 60px rgba(178, 73, 52, 0.15);

    /* Transitions */
    --ds-transition-fast: 150ms ease;
    --ds-transition: 300ms ease;
    --ds-transition-slow: 500ms ease;
  }
}

/* Chat layout primitives */
.chat-shell {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
}

.chat-header {
  background: linear-gradient(90deg, var(--ds-primary) 0%, var(--ds-primary-100) 100%);
  color: var(--ds-text-inverse);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--ds-shadow-md);
}

.chat-recents {
  background: var(--ds-bg-2);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-recents__item {
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1) var(--ds-space-2);
  transition: background var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.chat-recents__item:hover {
  background: rgba(255, 103, 56, 0.08);
  box-shadow: var(--ds-shadow-xs);
}

.chat-recents__item--active {
  background: rgba(255, 103, 56, 0.12);
  border: 1px solid rgba(255, 103, 56, 0.3);
}

.chat-messages {
  background: var(--ds-bg);
  color: var(--ds-text);
}

.chat-message--assistant {
  background: rgba(255, 103, 56, 0.08);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-2);
}

.chat-message--user {
  background: #fff;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-2);
  box-shadow: var(--ds-shadow-xs);
}

.chat-drawer {
  background: #fff;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-pill {
  border-radius: var(--ds-radius-pill);
  background: rgba(0, 0, 0, 0.04);
  padding: 0.35rem 0.75rem;
  color: var(--ds-text-700);
}

.chat-btn-primary {
  background: var(--ds-primary);
  color: #fff;
  border-radius: var(--ds-radius-md);
  padding: 0.65rem 1rem;
  border: none;
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.chat-btn-primary:hover {
  background: var(--ds-primary-100);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
}

.chat-btn-primary:active {
  background: var(--ds-primary-900);
  transform: translateY(0);
}

.chat-input {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--ds-radius-pill);
  padding: 0.75rem 1rem;
  box-shadow: var(--ds-shadow-xs);
}