/* ================================================
   ArgusOS — Design Tokens, Reset, Typography
   ================================================ */
:root {
  --bg: #05090b;
  --bg-panel: #0a1216;
  --bg-elevated: #0f1a1f;
  --bg-desk: #0c161a;
  --border: rgba(9,175,150,0.16);
  --border-strong: rgba(9,175,150,0.34);
  --teal: #09af96;
  --teal-soft: rgba(9,175,150,0.14);
  --teal-glow: rgba(9,175,150,0.55);
  --salmon: #ef8271;
  --salmon-soft: rgba(239,130,113,0.14);
  --text: #e7f3f1;
  --text-muted: #7c9694;
  --text-dim: #4c625f;
  --ok: #09af96;
  --warn: #e8b34a;
  --err: #ef5b5b;
  --radius: 10px;
  --radius-sm: 6px;
  --sans: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --density-pad: 16px;
  --density-gap: 14px;
}

body.compact { --density-pad: 10px; --density-gap: 8px; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(9,175,150,0.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(239,130,113,0.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--teal-soft); color: var(--text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ===== Keyframe animations ===== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.82); opacity: .75; } }
@keyframes breathe-fast { 0%,100% { transform: scale(1); } 50% { transform: scale(0.7); } }
@keyframes wave { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.3); } }
@keyframes pulse-ring { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .6; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sprite-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes sprite-walk { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes bubble-pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.15); } }
@keyframes tdot { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

body.no-motion .ticker-track,
body.no-motion .core .ring.spin,
body.no-motion .core .dot,
body.no-motion .login-core .ring.spin,
body.no-motion .login-core .dot { animation: none !important; }