/* ========================================
   APPSPEAKER DESIGN SYSTEM
   Brand Color: #4B00D7 (Purple)
   Based on shadcn/ui colors & Tailwind CSS
======================================== */

:root {
  /* ========================================
     BRAND COLORS - Primary Purple
  ======================================== */
  --brand-50: #faf5ff;
  --brand-100: #f3e8ff;
  --brand-200: #e9d5ff;
  --brand-300: #d8b4fe;
  --brand-400: #c084fc;
  --brand-500: #4B00D7;  /* Main brand color */
  --brand-600: #6d28d9;
  --brand-700: #5b21b6;
  --brand-800: #4c1d95;
  --brand-900: #3b0764;

  /* ========================================
     SEMANTIC COLORS - Success (Green)
  ======================================== */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;

  /* ========================================
     SEMANTIC COLORS - Warning (Amber)
  ======================================== */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* ========================================
     SEMANTIC COLORS - Error (Red)
  ======================================== */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;

  /* ========================================
     SEMANTIC COLORS - Info (Blue)
  ======================================== */
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;

  /* ========================================
     RATING COLORS - For review stars
  ======================================== */
  --rating-5: #16a34a;  /* green-600 */
  --rating-4: #65a30d;  /* lime-600 */
  --rating-3: #d97706;  /* amber-600 */
  --rating-2: #ea580c;  /* orange-600 */
  --rating-1: #dc2626;  /* red-600 */

  /* ========================================
     NEUTRAL COLORS - Grays (Zinc palette)
  ======================================== */
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;

  /* ========================================
     BACKGROUND & TEXT
  ======================================== */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f4f4f5;

  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-tertiary: #71717a;
  --text-disabled: #a1a1aa;

  /* ========================================
     BORDERS & SHADOWS
  ======================================== */
  --border-primary: #e4e4e7;
  --border-secondary: #d4d4d8;
  --border-focus: var(--brand-500);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ========================================
     GRADIENTS
  ======================================== */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  --gradient-subtle: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 100%);
}

/* ========================================
   DARK MODE (Optional - for future)
======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #18181b;
    --bg-secondary: #27272a;
    --bg-tertiary: #3f3f46;

    --text-primary: #fafafa;
    --text-secondary: #e4e4e7;
    --text-tertiary: #a1a1aa;
    --text-disabled: #71717a;

    --border-primary: #3f3f46;
    --border-secondary: #52525b;
  }
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Background Colors */
.bg-brand { background-color: var(--brand-500); }
.bg-success { background-color: var(--success-500); }
.bg-warning { background-color: var(--warning-500); }
.bg-error { background-color: var(--error-500); }
.bg-info { background-color: var(--info-500); }

/* Text Colors */
.text-brand { color: var(--brand-500); }
.text-success { color: var(--success-600); }
.text-warning { color: var(--warning-600); }
.text-error { color: var(--error-600); }
.text-info { color: var(--info-600); }

/* Border Colors */
.border-brand { border-color: var(--brand-500); }
.border-success { border-color: var(--success-500); }
.border-warning { border-color: var(--warning-500); }
.border-error { border-color: var(--error-500); }
.border-info { border-color: var(--info-500); }

/* Gradients */
.gradient-brand { background: var(--gradient-brand); }
.gradient-success { background: var(--gradient-success); }
.gradient-text-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}