/**
 * Droidwatch Design Tokens — single source of truth.
 *
 * Both the SPA (index.html → main.css) and the landing page (landing.html)
 * import this file. All color, spacing, radius and motion values live here.
 *
 * Landing-compat aliases (--card, --text, --muted, --green, --red, --yellow,
 * --accent2) let landing.html use its own compact CSS without renaming every
 * property, while still pulling the canonical values.
 */

/* ── Dark theme (default) ──────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #080a0d;
  --bg-alt:        #0d0f14;

  /* Surfaces (card hierarchy) */
  --surface:       #111318;
  --surface-2:     #191c24;
  --surface-3:     #1f2330;

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-hover:  rgba(255,255,255,0.14);

  /* Typography */
  --text-primary:  #e2e8f0;
  --text-secondary:#8892a4;
  --text-muted:    #4a5568;

  /* Brand accent — indigo */
  --accent:        #5b6af0;
  --accent-hover:  #6b7cf8;
  --accent-glow:   rgba(91,106,240,0.25);
  --accent-subtle: rgba(91,106,240,0.10);
  --accent2:       #8b5cf6;   /* violet gradient endpoint, used in landing hero */

  /* Semantic colors */
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --danger-deep:   #dc2626;
  --info:          #3b82f6;

  /* Severity scale */
  --sev-critical:  #dc2626;
  --sev-high:      #ef4444;
  --sev-medium:    #f59e0b;
  --sev-low:       #3b82f6;
  --sev-info:      #6b7280;

  /* Verdict colors */
  --verd-benign:     #10b981;
  --verd-suspicious: #f59e0b;
  --verd-highrisk:   #ef4444;
  --verd-malicious:  #dc2626;

  /* Layout */
  --sidebar-w:   220px;
  --topbar-h:    56px;
  --drawer-w:    min(760px, 55vw);

  /* Border radii */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Motion */
  --t-fast: 150ms ease;
  --t-mid:  220ms ease;
  --t-slow: 350ms cubic-bezier(0.4,0,0.2,1);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ── Landing-compat aliases ─────────────────────────────────────────────── */
  /* These map landing.html's short variable names to the canonical tokens so  */
  /* landing CSS works without renaming every property.                         */
  --card:   var(--surface-2);
  --text:   var(--text-primary);
  --muted:  var(--text-secondary);
  --green:  var(--success);
  --red:    var(--sev-critical);
  --yellow: var(--sev-medium);

  /* Landing nav backdrop — computed from --bg so it updates with themes */
  --nav-backdrop: rgba(8,10,13,0.95);
}

/* ── Light theme overrides ─────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #f1f4f9;
  --bg-alt:        #e8ecf4;
  --surface:       #ffffff;
  --surface-2:     #f7f9fc;
  --surface-3:     #edf0f7;
  --border:        rgba(0,0,0,0.08);
  --border-hover:  rgba(0,0,0,0.16);
  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --accent-glow:   rgba(91,106,240,0.15);
  --accent-subtle: rgba(91,106,240,0.08);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.1),  0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:     0 10px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);

  /* Compat aliases for light mode */
  --nav-backdrop: rgba(241,244,249,0.95);
}