/* ═══════════════════════════════════════════
   TSS Portal — Design Tokens
   Shared across all pages and tools
   ═══════════════════════════════════════════ */

:root {
  /* Background */
  --bg: #06060b;
  --bg-secondary: #0d0d15;
  --bg-card: rgba(15, 15, 25, 0.65);
  --bg-card-solid: #10101c;
  --bg-card-hover: rgba(22, 22, 40, 0.75);

  /* Text */
  --text: #eaeaf0;
  --text-secondary: #8888a0;
  --text-muted: #555570;

  /* Border */
  --border: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.10);

  /* Brand colors */
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-glow: rgba(99,102,241,0.45);
  --accent-purple: #a855f7;
  --accent-cyan: #22d3ee;
  --accent-rose: #f43f5e;
  --accent-amber: #f59e0b;
  --accent-emerald: #10b981;
  --danger: #ef4444;

  /* Glass */
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: 20px;

  /* Elevation */
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px var(--primary-glow);

  /* Radius */
  --radius: 16px;
  --radius-lg: 20px;
  --radius-sm: 10px;
}

/* ═══ Light theme ═══ */
:root.light {
  --bg: #f0f2f8;
  --bg-secondary: #e8eaf3;
  --bg-card: rgba(255,255,255,0.65);
  --bg-card-solid: #ffffff;
  --bg-card-hover: rgba(255,255,255,0.85);

  --text: #1a1a2e;
  --text-secondary: #5a5a78;
  --text-muted: #9090a8;

  --border: rgba(0,0,0,0.06);
  --border-light: rgba(0,0,0,0.10);

  --glass: rgba(255,255,255,0.45);
  --glass-border: rgba(255,255,255,0.5);
  --glass-blur: 24px;

  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
}