/* KoraSafe Design Tokens
   Canonical token reference shared across all surfaces.
   Surfaces: Web platform, admin pages, VS Code extension, Chrome extension, email.

   This file defines the authoritative color system. Individual surfaces may
   import these tokens or replicate them inline (email, extensions) but must
   use the same hex values.

   Token naming: --ks-{category}-{variant}
   Categories: bg, surface, border, text, accent, status, agent
*/

:root {
  /* ── Backgrounds ── */
  --ks-bg-primary: #09122b;
  --ks-bg-secondary: #0b1838;
  --ks-bg-tertiary: #0d2248;

  /* ── Surfaces (glassmorphism base) ── */
  --ks-surface: rgba(14, 24, 49, 0.76);
  --ks-surface-elevated: rgba(18, 31, 61, 0.78);
  --ks-surface-glass: rgba(255, 255, 255, 0.03);
  --ks-surface-deep: rgba(0, 0, 0, 0.2);

  /* ── Borders ── */
  --ks-border: rgba(148, 163, 184, 0.1);
  --ks-border-medium: rgba(148, 163, 184, 0.22);
  --ks-border-strong: rgba(148, 163, 184, 0.34);

  /* ── Text ── */
  --ks-text-primary: #e2e8f0;
  --ks-text-secondary: #cbd5e1;
  --ks-text-muted: #94a3b8;
  --ks-text-dim: #64748b;

  /* ── Brand accents ── */
  --ks-indigo: #6366f1;
  --ks-indigo-light: #818cf8;
  --ks-purple: #8b5cf6;
  --ks-purple-light: #a78bfa;
  --ks-cyan: #22d3ee;
  --ks-cyan-muted: #67e8f9;

  /* ── Status colors ── */
  --ks-green: #10b981;
  --ks-green-light: #6ee7b7;
  --ks-amber: #f59e0b;
  --ks-amber-light: #fcd34d;
  --ks-red: #ef4444;
  --ks-red-light: #fca5a5;

  /* ── Status backgrounds ── */
  --ks-green-bg: rgba(16, 185, 129, 0.16);
  --ks-amber-bg: rgba(245, 158, 11, 0.16);
  --ks-red-bg: rgba(239, 68, 68, 0.16);
  --ks-indigo-bg: rgba(99, 102, 241, 0.16);
  --ks-purple-bg: rgba(139, 92, 246, 0.16);

  /* ── Agent-specific ── */
  --ks-agent-auditor: #a78bfa;  /* Code Auditor: purple */
  --ks-agent-guardian: #f87171; /* Guardian agents: red */
  --ks-agent-knowledge: #6366f1; /* Knowledge/risk agents: indigo */
  --ks-agent-remediation: #34d399; /* Remediation: green */

  /* ── Glass morphism parameters ── */
  --ks-glass-blur: 16px;
  --ks-glass-saturate: 130%;
  --ks-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Motion ── */
  --ks-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-duration-fast: 0.15s;
  --ks-duration-normal: 0.3s;
  --ks-duration-slow: 0.6s;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
  --ks-bg-primary: #f8fafc;
  --ks-bg-secondary: #f1f5f9;
  --ks-bg-tertiary: #e2e8f0;

  --ks-surface: rgba(255, 255, 255, 0.8);
  --ks-surface-elevated: rgba(255, 255, 255, 0.9);
  --ks-surface-glass: rgba(255, 255, 255, 0.6);
  --ks-surface-deep: rgba(0, 0, 0, 0.05);

  --ks-border: rgba(0, 0, 0, 0.08);
  --ks-border-medium: rgba(0, 0, 0, 0.12);
  --ks-border-strong: rgba(0, 0, 0, 0.18);

  --ks-text-primary: #0f172a;
  --ks-text-secondary: #1e293b;
  --ks-text-muted: #64748b;
  --ks-text-dim: #94a3b8;

  /* Status colors darken for readability on light bg */
  --ks-green: #059669;
  --ks-green-light: #10b981;
  --ks-amber: #b45309;
  --ks-amber-light: #d97706;
  --ks-red: #dc2626;
  --ks-red-light: #ef4444;

  --ks-green-bg: rgba(5, 150, 105, 0.1);
  --ks-amber-bg: rgba(180, 83, 9, 0.1);
  --ks-red-bg: rgba(239, 68, 68, 0.1);
  --ks-indigo-bg: rgba(99, 102, 241, 0.1);
  --ks-purple-bg: rgba(124, 58, 237, 0.1);
}