/*
 * Design Tokens - CSS Custom Properties
 *
 * This file defines all colors and design values used throughout the application.
 * Using CSS variables provides a single source of truth and makes it easy to
 * update the color scheme globally.
 *
 * Naming Convention: Tailwind-style
 * - Gray scale: --color-gray-{50-900}
 * - Primary (blue): --color-blue-{50-900}
 * - Event types: --event-type-{name}-{bg|text}
 * - Other colors as needed
 *
 * Usage:
 *   color: var(--color-gray-500);
 *   background-color: var(--color-blue-50);
 */

:root {
  /* ===== Gray Scale ===== */
  /* Used for text, borders, backgrounds throughout the UI */
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ===== Primary Color (Blue) ===== */
  /* Used for links, buttons, focus states */
  --color-blue-50: #eff6ff;
  --color-blue-200: #bfdbfe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* ===== Event Type Colors ===== */
  /* Live events - Dark Blue */
  --event-type-live-bg: #bfdbfe;      /* blue-200 */
  --event-type-live-text: #1e3a8a;    /* blue-900 */

  /* Virtual events - Magenta/Pink */
  --event-type-virtual-bg: #fce7f3;   /* pink-100 */
  --event-type-virtual-text: #9f1239; /* rose-800 */

  /* Webinar events - Green */
  --event-type-webinar-bg: #dcfce7;   /* green-100 */
  --event-type-webinar-text: #166534; /* green-800 */

  /* Meal events - Orange/Amber */
  --event-type-meal-bg: #fed7aa;      /* orange-200 */
  --event-type-meal-text: #9a3412;    /* orange-800 */

  /* ===== Semantic Colors ===== */
  /* Background colors */
  --color-bg-primary: #ffffff;        /* white */
  --color-bg-secondary: var(--color-gray-50);

  /* Text colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);

  /* Border colors */
  --color-border-light: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);

  /* Interactive colors */
  --color-interactive-primary: var(--color-blue-500);
  --color-interactive-primary-hover: var(--color-blue-600);
  --color-interactive-focus: var(--color-blue-500);

  /* Legacy alias - used by SMTP campaign styles */
  --color-primary: var(--color-blue-500);

  /* Info/Help colors */
  --color-info-bg: var(--color-blue-50);
  --color-info-border: var(--color-blue-200);
  --color-info-icon: var(--color-blue-400);
  --color-info-text: var(--color-blue-800);
}