/*
 * BehaviorPro Labs — Color overrides for Psychology Models
 *
 * This file maps the tool's existing CSS variables to the BehaviorPro palette.
 * Loaded AFTER the tool's own style.css so it overrides the defaults.
 *
 * Default = dark mode (matching BehaviorPro's default)
 */

:root {
  /* Override to BehaviorPro dark palette */
  --color-background: #020617;           /* slate-950 */
  --color-surface: #0f172a;              /* slate-900 */
  --color-text: #f3f4f6;                 /* gray-100 */
  --color-text-secondary: rgba(209, 213, 219, 0.9); /* gray-300/90 — improved contrast */
  --color-primary: #2dd4bf;              /* teal-400 */
  --color-primary-hover: #14b8a6;        /* teal-500 */
  --color-primary-active: #0d9488;       /* teal-600 */
  --color-secondary: rgba(51, 65, 85, 0.4);  /* slate-700/40 */
  --color-secondary-hover: rgba(51, 65, 85, 0.6);
  --color-secondary-active: rgba(51, 65, 85, 0.8);
  --color-border: rgba(51, 65, 85, 0.8);     /* slate-700 */
  --color-btn-primary-text: #0f172a;          /* dark text on teal */
  --color-card-border: rgba(51, 65, 85, 0.5);
  --color-card-border-inner: rgba(51, 65, 85, 0.3);
  --color-focus-ring: rgba(45, 212, 191, 0.6); /* teal-400/60 — increased for tritanopia */

  /* Status colors — colorblind-safe */
  --color-error: #f87171;               /* red-400 */
  --color-success: #34d399;             /* emerald-400 */
  --color-warning: #fbbf24;             /* amber-400 */
  --color-info: #60a5fa;                /* blue-400 */
  --color-success-rgb: 52, 211, 153;
  --color-error-rgb: 248, 113, 113;
  --color-warning-rgb: 251, 191, 36;
  --color-info-rgb: 96, 165, 250;

  /* Typography — match BehaviorPro */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;

  /* Shadows — darker for dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
}

/* Override dark mode media query to prevent doubling */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #020617;
    --color-surface: #0f172a;
    --color-text: #f3f4f6;
    --color-text-secondary: rgba(209, 213, 219, 0.9);
    --color-primary: #2dd4bf;
    --color-primary-hover: #14b8a6;
    --color-primary-active: #0d9488;
    --color-secondary: rgba(51, 65, 85, 0.4);
    --color-secondary-hover: rgba(51, 65, 85, 0.6);
    --color-secondary-active: rgba(51, 65, 85, 0.8);
    --color-border: rgba(51, 65, 85, 0.8);
    --color-btn-primary-text: #0f172a;
    --color-card-border: rgba(51, 65, 85, 0.5);
    --color-card-border-inner: rgba(51, 65, 85, 0.3);
    --color-focus-ring: rgba(45, 212, 191, 0.6);
    --color-error: #f87171;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-info: #60a5fa;
    --color-success-rgb: 52, 211, 153;
    --color-error-rgb: 248, 113, 113;
    --color-warning-rgb: 251, 191, 36;
    --color-info-rgb: 96, 165, 250;
  }
}

/* Light mode — matches BehaviorPro light mode */
[data-color-scheme="light"] {
  --color-background: #f3f4f6;          /* gray-100 */
  --color-surface: #ffffff;
  --color-text: #111827;                /* gray-900 */
  --color-text-secondary: rgba(75, 85, 99, 0.9); /* gray-600 */
  --color-primary: #14b8a6;             /* teal-500 */
  --color-primary-hover: #0d9488;       /* teal-600 */
  --color-primary-active: #0f766e;      /* teal-700 */
  --color-secondary: rgba(229, 231, 235, 0.5);  /* gray-200/50 */
  --color-secondary-hover: rgba(229, 231, 235, 0.8);
  --color-secondary-active: rgba(209, 213, 219, 0.8);
  --color-border: rgba(209, 213, 219, 0.8);     /* gray-300 */
  --color-btn-primary-text: #ffffff;
  --color-card-border: rgba(229, 231, 235, 0.8);
  --color-card-border-inner: rgba(229, 231, 235, 0.6);
  --color-focus-ring: rgba(20, 184, 166, 0.4);
  --color-error: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-success-rgb: 16, 185, 129;
  --color-error-rgb: 239, 68, 68;
  --color-warning-rgb: 245, 158, 11;
  --color-info-rgb: 59, 130, 246;
}