/*
 * Lens design system — color tokens (single source of truth).
 *
 * Primitives + semantic roles shared by SPA, landing page, and future surfaces.
 * Default theme is light (`:root`); dark overrides via `[data-theme="dark"]`.
 */

:root {
  color-scheme: light;

  /* Brand: professional, reliable, AI-native */
  --lens-color-primary-50: #eef2ff;
  --lens-color-primary-100: #e0e7ff;
  --lens-color-primary-200: #c7d2fe;
  --lens-color-primary-300: #a5b4fc;
  --lens-color-primary-400: #818cf8;
  --lens-color-primary-500: #6366f1;
  --lens-color-primary-600: #4f46e5;
  --lens-color-primary-700: #4338ca;
  --lens-color-primary-800: #3730a3;
  --lens-color-primary-900: #312e81;
  --lens-color-primary-950: #1e1b4b;

  /* Neutral: slate keeps finance workflows readable for long sessions */
  --lens-color-slate-50: #f8fafc;
  --lens-color-slate-100: #f1f5f9;
  --lens-color-slate-200: #e2e8f0;
  --lens-color-slate-300: #cbd5e1;
  --lens-color-slate-400: #94a3b8;
  --lens-color-slate-500: #64748b;
  --lens-color-slate-600: #475569;
  --lens-color-slate-700: #334155;
  --lens-color-slate-800: #1e293b;
  --lens-color-slate-900: #0f172a;
  --lens-color-slate-950: #020617;

  /* AI accent: used sparingly for automation, retrieval, and stream hints */
  --lens-color-ai-50: #ecfeff;
  --lens-color-ai-100: #cffafe;
  --lens-color-ai-300: #67e8f9;
  --lens-color-ai-500: #06b6d4;
  --lens-color-ai-600: #0891b2;

  /* Audit status colors */
  --lens-color-success-50: #f0fdf4;
  --lens-color-success-100: #dcfce7;
  --lens-color-success-500: #22c55e;
  --lens-color-success-600: #16a34a;
  --lens-color-success-700: #15803d;

  --lens-color-warning-50: #fffbeb;
  --lens-color-warning-100: #fef3c7;
  --lens-color-warning-500: #f59e0b;
  --lens-color-warning-600: #d97706;
  --lens-color-warning-700: #b45309;

  --lens-color-danger-50: #fef2f2;
  --lens-color-danger-100: #fee2e2;
  --lens-color-danger-500: #ef4444;
  --lens-color-danger-600: #dc2626;
  --lens-color-danger-700: #b91c1c;

  --lens-color-info-50: #eff6ff;
  --lens-color-info-100: #dbeafe;
  --lens-color-info-500: #3b82f6;
  --lens-color-info-600: #2563eb;
  --lens-color-info-700: #1d4ed8;

  /* Theme-independent roles */
  --lens-brand-primary: var(--lens-color-primary-600);
  --lens-brand-primary-hover: var(--lens-color-primary-700);
  --lens-brand-primary-soft: var(--lens-color-primary-50);
  --lens-brand-primary-muted: var(--lens-color-primary-300);
  --lens-ai-accent: var(--lens-color-ai-500);
  --lens-ai-accent-soft: var(--lens-color-ai-50);

  --lens-status-success: var(--lens-color-success-600);
  --lens-status-warning: var(--lens-color-warning-600);
  --lens-status-danger: var(--lens-color-danger-600);
  --lens-status-info: var(--lens-color-info-600);

  --lens-gradient-brand: linear-gradient(
    135deg,
    var(--lens-color-primary-600) 0%,
    var(--lens-color-info-600) 52%,
    var(--lens-color-ai-500) 100%
  );
  --lens-gradient-primary-button: linear-gradient(
    135deg,
    var(--lens-color-primary-500),
    var(--lens-color-primary-600)
  );

  /* Light semantic surfaces (SPA default) */
  --lens-surface-page: var(--lens-color-slate-50);
  --lens-surface-elevated: #ffffff;
  --lens-surface-card: rgba(255, 255, 255, 0.88);
  --lens-surface-subtle: rgba(15, 23, 42, 0.03);
  --lens-surface-muted: rgba(15, 23, 42, 0.04);
  --lens-surface-outline: rgba(255, 255, 255, 0.75);

  --lens-text-primary: var(--lens-color-slate-900);
  --lens-text-secondary: var(--lens-color-slate-600);
  --lens-text-tertiary: var(--lens-color-slate-500);

  --lens-border-subtle: rgba(15, 23, 42, 0.08);
  --lens-border-strong: rgba(15, 23, 42, 0.12);
  --lens-shadow-card: 0 20px 60px rgba(15, 23, 42, 0.08);
  --lens-shadow-card-hover: 0 16px 48px rgba(15, 23, 42, 0.12);
  --lens-shadow-primary: 0 8px 28px rgba(79, 70, 229, 0.28);
  --lens-shadow-primary-hover: 0 12px 36px rgba(79, 70, 229, 0.36);

  --lens-nav-bg: rgba(248, 250, 252, 0.86);
  --lens-nav-bg-scrolled: rgba(248, 250, 252, 0.96);
  --lens-nav-mobile-bg: rgba(255, 255, 255, 0.98);
}

:root,
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;

  --lens-surface-page: #111827;
  --lens-surface-elevated: #172033;
  --lens-surface-card: rgba(23, 32, 51, 0.76);
  --lens-surface-subtle: rgba(255, 255, 255, 0.03);
  --lens-surface-muted: rgba(255, 255, 255, 0.05);
  --lens-surface-outline: rgba(255, 255, 255, 0.04);

  --lens-text-primary: #eef2ff;
  --lens-text-secondary: var(--lens-color-slate-400);
  --lens-text-tertiary: var(--lens-color-slate-500);

  --lens-border-subtle: rgba(255, 255, 255, 0.08);
  --lens-border-strong: rgba(255, 255, 255, 0.14);
  --lens-shadow-card: 0 24px 80px rgba(0, 0, 0, 0.45);
  --lens-shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.35);
  --lens-shadow-primary: 0 8px 28px rgba(129, 140, 248, 0.24);
  --lens-shadow-primary-hover: 0 12px 36px rgba(129, 140, 248, 0.32);

  --lens-nav-bg: rgba(17, 24, 39, 0.78);
  --lens-nav-bg-scrolled: rgba(17, 24, 39, 0.94);
  --lens-nav-mobile-bg: rgba(17, 24, 39, 0.96);
}