/*
 * BehaviorPro Labs — Shared Design Tokens
 *
 * This file defines CSS custom properties that match the BehaviorPro
 * design system. Import this in any tool to get consistent colors,
 * fonts, and spacing.
 *
 * Usage: <link rel="stylesheet" href="/shared/labs-theme.css">
 * Then use: color: var(--labs-text-primary);
 */

/* ============================================
   Google Fonts Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   Dark Mode (default) — matches BehaviorPro
   ============================================ */
:root {
  /* Backgrounds */
  --labs-bg-body: #020617;           /* slate-950 */
  --labs-bg-primary: #0f172a;        /* slate-900 */
  --labs-bg-secondary: #1e293b;      /* slate-800 */
  --labs-bg-surface: #1a2744;        /* navy-800/60 equivalent */
  --labs-bg-hover: #263554;          /* navy-700 */

  /* Text */
  --labs-text-primary: #f3f4f6;      /* gray-100 */
  --labs-text-secondary: #d1d5db;    /* gray-300 */
  --labs-text-muted: #a8b0bc;        /* gray-350 — higher contrast for small text */

  /* Accent — Teal (BehaviorPro brand color) */
  --labs-accent: #2dd4bf;            /* teal-400 */
  --labs-accent-hover: #14b8a6;      /* teal-500 */
  --labs-accent-muted: rgba(45, 212, 191, 0.15);

  /* Borders — interactive elements use border-light for WCAG 3:1 */
  --labs-border: #3b4c66;            /* between slate-700 and slate-600 */
  --labs-border-light: #475569;      /* slate-600 */

  /* Status colors (colorblind-safe — always used WITH icons) */
  --labs-success: #34d399;           /* emerald-400 */
  --labs-warning: #fbbf24;           /* amber-400 */
  --labs-error: #f87171;             /* red-400 */
  --labs-info: #60a5fa;              /* blue-400 */

  /* Shadows */
  --labs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --labs-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.4);
  --labs-shadow-glow: 0 0 20px rgba(45, 212, 191, 0.15);

  /* Typography */
  --labs-font: 'Inter', system-ui, -apple-system, sans-serif;
  --labs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Spacing */
  --labs-radius-sm: 6px;
  --labs-radius: 8px;
  --labs-radius-lg: 12px;
  --labs-radius-xl: 16px;

  /* Transitions */
  --labs-transition: 150ms ease;
  --labs-transition-slow: 300ms ease;
}

/* ============================================
   Light Mode
   ============================================ */
.light-mode,
[data-theme="light"] {
  --labs-bg-body: #f3f4f6;           /* gray-100 */
  --labs-bg-primary: #ffffff;
  --labs-bg-secondary: #f9fafb;      /* gray-50 */
  --labs-bg-surface: #ffffff;
  --labs-bg-hover: #f3f4f6;

  --labs-text-primary: #111827;      /* gray-900 */
  --labs-text-secondary: #4b5563;    /* gray-600 */
  --labs-text-muted: #6b7280;        /* gray-500 */

  --labs-accent: #14b8a6;            /* teal-500 */
  --labs-accent-hover: #0d9488;      /* teal-600 */
  --labs-accent-muted: rgba(20, 184, 166, 0.1);

  --labs-border: #e5e7eb;            /* gray-200 */
  --labs-border-light: #d1d5db;      /* gray-300 */

  --labs-success: #10b981;           /* emerald-500 */
  --labs-warning: #f59e0b;           /* amber-500 */
  --labs-error: #ef4444;             /* red-500 */
  --labs-info: #3b82f6;              /* blue-500 */

  --labs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
  --labs-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  --labs-shadow-glow: 0 0 20px rgba(20, 184, 166, 0.1);
}

/* ============================================
   Base Resets (opt-in — only applied to Labs shell)
   ============================================ */
.labs-shell {
  font-family: var(--labs-font);
  color: var(--labs-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Utility Classes
   ============================================ */
.labs-card {
  background: var(--labs-bg-surface);
  border: 1px solid var(--labs-border);
  border-radius: var(--labs-radius-lg);
  padding: 1.5rem;
  transition: box-shadow var(--labs-transition), border-color var(--labs-transition);
}

.labs-card:hover {
  box-shadow: var(--labs-shadow-glow);
  border-color: var(--labs-border-light);
}

.labs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--labs-accent-muted);
  color: var(--labs-accent);
  border: 1px solid rgba(45, 212, 191, 0.2);
}

.labs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--labs-font);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--labs-radius);
  border: none;
  cursor: pointer;
  transition: all var(--labs-transition);
  text-decoration: none;
}

.labs-btn-primary {
  background: var(--labs-accent);
  color: #0f172a;
}

.labs-btn-primary:hover {
  background: var(--labs-accent-hover);
  box-shadow: var(--labs-shadow-glow);
}

.labs-btn-outline {
  background: transparent;
  color: var(--labs-text-primary);
  border: 1px solid var(--labs-border);
}

.labs-btn-outline:hover {
  border-color: var(--labs-accent);
  color: var(--labs-accent);
}