/* ============================================
   Eventio Design System v3.3 — Design Tokens
   ============================================ */

:root {
  /* --- Fonts --- */
  --font-display: 'Clash Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* --- Brand Color Ramps (50 / 200 / 600) --- */

  /* Orange — In-House / Org mode */
  --brand-orange-50: #FFDAB2;
  --brand-orange-200: #FF9E33;
  --brand-orange-600: #B96406;

  /* Blue — Pro Independent mode */
  --brand-blue-50: #D2E7FC;
  --brand-blue-200: #57A5F4;
  --brand-blue-600: #0D70D4;

  /* Purple — DIY Planner mode */
  --brand-purple-50: #E6E0FD;
  --brand-purple-200: #9C82F8;
  --brand-purple-600: #5B30F1;

  /* Pink — Vendor mode */
  --brand-pink-50: #FCE2E8;
  --brand-pink-200: #ED6586;
  --brand-pink-600: #DA1243;

  /* --- Grey Scale --- */
  --grey-25: #F3F5F7;
  --grey-700: #303B5F;
  --grey-900: #09113B;

  /* --- Neutrals --- */
  --n-50: #fafafa;
  --n-100: #f4f4f5;
  --n-200: #e4e4e7;
  --n-300: #d4d4d8;
  --n-400: #a1a1aa;
  --n-500: #71717a;
  --n-600: #52525b;
  --n-700: #3f3f46;
  --n-800: #27272a;
  --n-950: #0a0a0a;

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

  /* --- Spacing & Radius --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);

  /* --- Sidebar --- */
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg: var(--grey-900);

  /* --- Default accent (overridden by data-mode) --- */
  --accent: #9C82F8;
  --accent-50: #E6E0FD;
  --accent-200: #9C82F8;
  --accent-600: #5B30F1;

  /* --- Aliases (--color-* convention used by Pro wizard components) --- */
  --color-blue-50: var(--brand-blue-50);
  --color-blue-200: var(--brand-blue-200);
  --color-blue-600: var(--brand-blue-600);
  --color-purple-50: var(--brand-purple-50);
  --color-purple-200: var(--brand-purple-200);
  --color-purple-600: var(--brand-purple-600);
  --color-orange-50: var(--brand-orange-50);
  --color-orange-200: var(--brand-orange-200);
  --color-orange-600: var(--brand-orange-600);
  --color-pink-50: var(--brand-pink-50);
  --color-pink-200: var(--brand-pink-200);
  --color-pink-600: var(--brand-pink-600);
  --color-n-50: var(--n-50);
  --color-n-100: var(--n-100);
  --color-n-200: var(--n-200);
  --color-n-300: var(--n-300);
  --color-n-400: var(--n-400);
  --color-n-500: var(--n-500);
  --color-n-600: var(--n-600);
  --color-n-700: var(--n-700);
  --color-n-800: var(--n-800);
  --color-n-950: var(--n-950);
}

/* ============================================
   Mode-Specific Accent Colors
   Applied via data-mode attribute on a wrapper
   ============================================ */

[data-mode="diy"] {
  --accent: #9C82F8;
  --accent-50: #E6E0FD;
  --accent-200: #9C82F8;
  --accent-600: #5B30F1;
}

[data-mode="pro"] {
  --accent: #57A5F4;
  --accent-50: #D2E7FC;
  --accent-200: #57A5F4;
  --accent-600: #0D70D4;
}

[data-mode="org"] {
  --accent: #FF9E33;
  --accent-50: #FFDAB2;
  --accent-200: #FF9E33;
  --accent-600: #FF9E33;
}

[data-mode="vendor"] {
  --accent: #ED6586;
  --accent-50: #FCE2E8;
  --accent-200: #ED6586;
  --accent-600: #DA1243;
}

/* ============================================
   Typography Utility Classes
   ============================================ */

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

/* Headlines — Clash Grotesk */
.text-headline-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}

.text-headline-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}

.text-headline-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.text-headline-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
}

/* Body — Manrope */
.text-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

.text-body-md {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

.text-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

/* Labels — Manrope semibold */
.text-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
}

/* Captions — Manrope uppercase */
.text-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.text-caption-lg {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================
   Accent-Aware Utility Classes
   These automatically use the current mode's color
   ============================================ */

.bg-accent { background-color: var(--accent); }
.bg-accent-50 { background-color: var(--accent-50); }
.text-accent { color: var(--accent); }
.text-accent-600 { color: var(--accent-600); }
.border-accent { border-color: var(--accent); }

/* Status badge utility classes */
.badge-status-active {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.badge-status-in-progress {
  background-color: var(--brand-orange-50);
  color: var(--brand-orange-600);
}
.badge-status-planning {
  background-color: var(--brand-blue-50);
  color: var(--brand-blue-600);
}
.badge-status-lead {
  background-color: var(--brand-purple-50);
  color: var(--brand-purple-600);
}
.badge-status-at-risk {
  background-color: var(--brand-orange-50);
  color: var(--brand-orange-600);
}
.badge-status-overdue {
  background-color: var(--brand-pink-50);
  color: var(--brand-pink-600);
}
.badge-status-complete {
  background-color: var(--n-100);
  color: var(--n-500);
}

/* ============================================
   Neutral Color Utilities
   (Tailwind CDN cannot resolve var() in arbitrary values)
   ============================================ */

/* Text colors */
.text-n-50 { color: var(--n-50); }
.text-n-100 { color: var(--n-100); }
.text-n-200 { color: var(--n-200); }
.text-n-300 { color: var(--n-300); }
.text-n-400 { color: var(--n-400); }
.text-n-500 { color: var(--n-500); }
.text-n-600 { color: var(--n-600); }
.text-n-700 { color: var(--n-700); }
.text-n-800 { color: var(--n-800); }
.text-n-950 { color: var(--n-950); }

/* Background colors */
.bg-n-50 { background-color: var(--n-50); }
.bg-n-100 { background-color: var(--n-100); }
.bg-n-200 { background-color: var(--n-200); }
.bg-n-700 { background-color: var(--n-700); }
.bg-n-800 { background-color: var(--n-800); }
.bg-n-950 { background-color: var(--n-950); }

/* Border colors */
.border-n-200 { border-color: var(--n-200); }
.border-n-300 { border-color: var(--n-300); }

/* Divider color */
.divide-n-200 > :not(:first-child) { border-color: var(--n-200); }

/* Hover variants */
.hover\:bg-n-600:hover { background-color: var(--n-600); }
.hover\:text-n-950:hover { color: var(--n-950); }

/* Vendor brand gradient utilities */
.bg-gradient-vendor {
  background: linear-gradient(to right, var(--brand-pink-200), var(--brand-purple-200));
}
.bg-gradient-vendor-light {
  background: linear-gradient(to right, var(--brand-pink-50), var(--brand-purple-50));
}

/* ============================================
   Chat UI — AI Avatar, Typing Dots, Animations
   ============================================ */

/* AI Avatar: brand mark inside orange→pink gradient */
.chat-ai-avatar {
  flex-shrink: 0;
  border-radius: 28%;
  background: linear-gradient(135deg, var(--brand-orange-200), var(--brand-pink-200));
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-ai-avatar img {
  filter: brightness(10);
  pointer-events: none;
}

/* Typing indicator — three bouncing dots */
.chat-typing-dots {
  display: flex;
  gap: 4px;
  padding: 2px 0;
}
.chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-300);
  animation: chat-bounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Keyframes */
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes chat-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chat-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}