/*
 * Payments DB Theme for PGWeb
 *
 * Matches the dashboard aesthetic: zinc dark mode + indigo brand
 * Modern fintech / dev tool vibes
 */

:root {
  /* =========================================
   * Color Palettes
   * ========================================= */

  /* Indigo (Brand - replaces Violet) */
  --color-violet-050: #eef2ff;
  --color-violet-100: #e0e7ff;
  --color-violet-200: #c7d2fe;
  --color-violet-300: #a5b4fc;
  --color-violet-400: #818cf8;
  --color-violet-500: #6366f1;
  --color-violet-600: #4f46e5;
  --color-violet-700: #4338ca;
  --color-violet-800: #3730a3;
  --color-violet-900: #312e81;

  /* Emerald (Success/Accent) */
  --color-green-050: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;

  /* Blue (Info/Links) */
  --color-blue-050: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Red (Error/Destructive) */
  --color-red-050: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Dark (Zinc-based - matches dashboard exactly) */
  --color-dark-050: #fafafa;
  --color-dark-100: #f4f4f5;
  --color-dark-200: #e4e4e7;
  --color-dark-300: #d4d4d8;
  --color-dark-400: #a1a1aa;
  --color-dark-500: #71717a;  /* --muted */
  --color-dark-600: #52525b;
  --color-dark-700: #3f3f46;
  --color-dark-800: #27272a;  /* --border */
  --color-dark-900: #18181b;  /* --card */

  /* Light (for text on dark backgrounds) */
  --color-light-050: #fafafa;  /* --foreground */
  --color-light-100: #f4f4f5;
  --color-light-200: #e4e4e7;
  --color-light-300: #d4d4d8;
  --color-light-400: #a1a1aa;
  --color-light-500: #71717a;  /* --muted */
  --color-light-600: #52525b;
  --color-light-700: #3f3f46;
  --color-light-800: #27272a;
  --color-light-900: #18181b;

  /* =========================================
   * Semantic Aliases
   * ========================================= */

  /* Brand color - Indigo */
  --bg-brand: var(--color-violet-500);
  --text-brand: var(--color-violet-500);
  --border-brand: var(--color-violet-500);

  /* Accent color - Emerald */
  --bg-accent: var(--color-green-500);
  --text-accent: var(--color-green-500);
  --border-accent: var(--color-green-500);

  /* Dark theme backgrounds (exact match to dashboard) */
  --bg-dark-primary: #09090b;     /* --background */
  --bg-dark-secondary: #18181b;   /* --card */
  --bg-dark-tertiary: #1f1f23;    /* --card-hover */

  /* Light theme backgrounds */
  --bg-light-primary: #fafafa;
  --bg-light-secondary: #f4f4f5;
  --bg-light-tertiary: #e4e4e7;

  /* Utility */
  --bg-blue: var(--color-blue-500);
  --bg-red: var(--color-red-500);
  --text-dark: #09090b;
  --text-light: #fafafa;
  --text-blue: var(--color-blue-500);
  --text-red: var(--color-red-500);
  --border-blue: var(--color-blue-500);
  --border-red: var(--color-red-500);
}