/*
 * Kryvion Design Tokens
 * ---------------------
 * Canonical color/spacing variables for the application shell (sidebar, header, footer,
 * cards, dark mode). Introduced 2026-08-29 while consolidating CSS that had previously been
 * scattered across 3 inline <style> blocks in app/views/layouts/application.html.erb (~780
 * lines) plus per-feature stylesheets. See docs/developer/design-system.md for usage guidance
 * and a list of stylesheets that still define their own separate tokens and haven't been
 * migrated onto this system yet (custom_dashboards.css, and va_dashboard's Tailwind-based
 * layout) — those are flagged there as known follow-up work, not silently changed here.
 *
 * Values below were extracted from the existing, already-shipping styles (not invented) —
 * this file formalizes the app's current de facto palette into reusable tokens.
 */

:root {
  /* Sidebar (always-dark, regardless of light/dark content theme) */
  --kv-sidebar-gradient-start: #1a1a2e;
  --kv-sidebar-gradient-end: #16213e;
  --kv-sidebar-border: #0f3460;
  --kv-sidebar-text-muted: #a0a0a0;

  /* Brand accent (light theme) */
  --kv-accent: #e94560;
  --kv-accent-soft: rgba(233, 69, 96, 0.1);

  /* Light content theme (default) */
  --kv-bg: #f8f9fa;
  --kv-surface: #ffffff;
  --kv-text: #212529;
  --kv-text-muted: #6c757d;
  --kv-border: #dee2e6;
  --kv-shadow: rgba(0, 0, 0, 0.1);

  /* Spacing scale (used by layout shell / footer) */
  --kv-space-1: 0.5rem;
  --kv-space-2: 1rem;
  --kv-space-3: 1.5rem;
  --kv-space-4: 2rem;
  --kv-space-5: 3rem;

  --kv-sidebar-width: 280px;
  --kv-sidebar-width-collapsed: 80px;
}

/* Dark content theme — toggled via html[data-theme="dark"]. Uses a teal accent rather than
   the light theme's crimson; this was already the case in the pre-existing dark-mode styles
   and is preserved as-is rather than unified, since changing an established accent color is a
   product decision, not a structural cleanup. */
html[data-theme="dark"] {
  --kv-accent-dark: #2dd4bf;
  --kv-accent-dark-soft: #5eead4;

  --kv-bg-dark: #0f172a;
  --kv-bg-dark-elevated: #111827;
  --kv-surface-dark: #1f2937;
  --kv-surface-dark-alt: #162033;
  --kv-text-dark: #e5e7eb;
  --kv-text-dark-strong: #f8fafc;
  --kv-text-dark-muted: #94a3b8;
  --kv-border-dark: #374151;
  --kv-border-dark-alt: #334155;
}