/* SaaS-specific CSS variables — imported alongside core theme.css */

:root {
  /* Orange scale (used for warning toasts) */
  --color-orange-50: #fff4ed;
  --color-orange-100: #ffe1cc;
  --color-orange-200: #ffb089;
  --color-orange-300: #ff7a45;
  --color-orange-400: #d84a1b;

  /* Amber scale (trial/warning emphasis) */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Subcategory / divider vars (light) */
  --tool-subcategory-text-color-light: #9ca3af;
  --tool-subcategory-rule-color-light: #e5e7eb;
  --text-divider-rule-color: var(--color-gray-200);
  --text-divider-label-color: var(--color-gray-400);
  --text-divider-rule-color-light: var(--color-gray-200);
  --text-divider-label-color-light: var(--color-gray-400);

  /* Auth color vars */
  --auth-input-bg: #f9fafb;
  --auth-input-border: #e5e7eb;
  --auth-input-text: #1f2937;
  --auth-label-text: #2b3230;
  --auth-button-bg: #af3434;
  --auth-button-text: #ffffff;
  --auth-magic-button-bg: #af3434;
  --auth-magic-button-text: #ffffff;

  /* Light-only auth colors (no dark mode equivalents) used for login/signup */
  --auth-input-bg-light-only: #f9fafb;
  --auth-input-border-light-only: #e5e7eb;
  --auth-input-text-light-only: #1f2937;
  --auth-label-text-light-only: #2b3230;
  --auth-button-bg-light-only: #af3434;
  --auth-button-text-light-only: #ffffff;
  --auth-magic-button-bg-light-only: #af3434;
  --auth-magic-button-text-light-only: #ffffff;
  --auth-bg-color-light-only: #ffffff;
  --auth-card-bg-light-only: #ffffff;
  --auth-text-primary-light-only: #2b3230;
  --auth-text-secondary-light-only: #1f2937;
  --auth-border-color-light-only: #e5e7eb;
  --auth-border-focus-light-only: #cbd5e1;
  --auth-focus-ring-light-only: rgba(59, 130, 246, 0.15);

  /* App Config Modal colors (light mode) */
  --modal-nav-bg: #f5f6f8;
  --modal-nav-section-title: #6b7280;
  --modal-nav-item: #374151;
  --modal-nav-item-active: #0a8bff;
  --modal-nav-item-active-bg: rgba(10, 139, 255, 0.08);
  --modal-content-bg: #ffffff;
  --modal-header-border: rgba(0, 0, 0, 0.06);

  /* API usage progress bar colors (light mode) */
  --usage-weekly-active: #3b82f6;
  --usage-bought-active: #14b8a6;
  --usage-total-used: #3b82f6;
  --usage-inactive: #e5e7eb;

  /* API Keys section colors (light mode) */
  --api-keys-card-bg: #ffffff;
  --api-keys-card-border: #e0e0e0;
  --api-keys-card-shadow: rgba(0, 0, 0, 0.06);
  --api-keys-input-bg: #f8f8f8;
  --api-keys-input-border: #e0e0e0;
  --api-keys-button-bg: #f5f5f5;
  --api-keys-button-color: #333333;
}

[data-mantine-color-scheme="dark"] {
  /* Compare highlight colors (dark mode) */
  --spdf-compare-removed-bg: rgba(255, 107, 107, 0.45);
  --spdf-compare-added-bg: rgba(81, 207, 102, 0.35);
  --spdf-compare-removed-badge-bg: rgba(255, 59, 48, 0.15);
  --spdf-compare-removed-badge-fg: var(--color-red-500);
  --spdf-compare-added-badge-bg: rgba(52, 199, 89, 0.18);
  --spdf-compare-added-badge-fg: var(--color-green-500);
  --spdf-compare-inline-removed-bg: rgba(255, 59, 48, 0.25);
  --spdf-compare-inline-added-bg: rgba(52, 199, 89, 0.25);
  --compare-page-label-bg: #2a2f36;
  --compare-page-label-fg: #d0d6dc;

  /* Orange scale (dark mode mirrors light values to match UI) */
  --color-orange-50: #fff4ed;
  --color-orange-100: #ffe1cc;
  --color-orange-200: #ffb089;
  --color-orange-300: #ff7a45;
  --color-orange-400: #d84a1b;

  /* Auth page colors (dark mode) — mirror proprietary so the auth card themes dark */
  --auth-bg-color-light-only: var(--bg-muted);
  --auth-card-bg: var(--bg-surface);
  --auth-card-bg-light-only: var(--bg-surface);
  --auth-label-text-light-only: var(--text-secondary);
  --auth-input-border-light-only: var(--border-default);
  --auth-input-bg-light-only: var(--bg-raised);
  --auth-input-text-light-only: var(--text-primary);
  --auth-border-focus-light-only: #3b82f6;
  --auth-focus-ring-light-only: rgba(59, 130, 246, 0.2);
  --auth-button-bg-light-only: #af3434;
  --auth-button-text-light-only: #ffffff;
  --auth-magic-button-bg-light-only: var(--bg-raised);
  --auth-magic-button-text-light-only: var(--text-primary);
  --auth-text-primary-light-only: var(--text-primary);
  --auth-text-secondary-light-only: var(--text-secondary);
  --text-divider-rule-rgb-light: 229, 231, 235;
  --text-divider-label-rgb-light: 156, 163, 175;
  --tool-subcategory-rule-color-light: #e5e7eb;
  --tool-subcategory-text-color-light: #9ca3af;

  /* API usage progress bar colors (dark mode) */
  --usage-weekly-active: #60a5fa;
  --usage-bought-active: #34d399;
  --usage-total-used: #ffffff;
  --usage-inactive: #43464b;

  /* API Keys section colors (dark mode) */
  --api-keys-card-bg: #2a2f36;
  --api-keys-card-border: #3a4047;
  --api-keys-card-shadow: none;
  --api-keys-input-bg: #1f2329;
  --api-keys-input-border: #3a4047;
  --api-keys-button-bg: #3a4047;
  --api-keys-button-color: #d0d6dc;

  --text-divider-rule-color: var(--tool-subcategory-rule-color);
  --text-divider-label-color: var(--text-muted);

  /* App Config Modal colors (dark mode) */
  --modal-nav-bg: #1f2329;
  --modal-nav-section-title: #9ca3af;
  --modal-nav-item: #d0d6dc;
  --modal-nav-item-active: #0a8bff;
  --modal-nav-item-active-bg: rgba(10, 139, 255, 0.15);
  --modal-content-bg: #2a2f36;
  --modal-header-border: rgba(255, 255, 255, 0.08);
}
