/* Workspace — design tokens & global styles */

:root {
  --bg-0: #0F1115;
  --bg-1: #161922;
  --bg-2: #1C2030;
  --bg-3: #232839;
  --border: #2A2F3D;
  --border-strong: #353B4D;

  --text-0: #E6E8EE;
  --text-1: #A8AEBE;
  --text-2: #6B7185;
  --text-3: #4A5066;

  --accent: #4F8EFF;
  --accent-hover: #6BA0FF;
  --accent-dim: rgba(79, 142, 255, 0.12);
  --accent-border: rgba(79, 142, 255, 0.30);

  --founder: #4F8EFF;
  --tlead: #10B981;
  --code: #A855F7;
  --claude: #F97316;

  --p0: #EF4444;
  --p1: #F59E0B;
  --p2: #4F8EFF;
  --p3: #6B7185;

  --success: #10B981;
  --warn: #F59E0B;
  --danger: #EF4444;
  --info: #4F8EFF;

  --st-backlog: #6B7185;
  --st-ready: #60A5FA;
  --st-progress: #4F8EFF;
  --st-review: #F59E0B;
  --st-blocked: #EF4444;
  --st-closed: #10B981;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --t-mid: 180ms cubic-bezier(.2,.7,.3,1);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-0);
  color: var(--text-0);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.mono { font-family: var(--font-mono); }

/* density */
.density-compact { --row-pad-y: 6px; --card-pad: 10px; }
.density-cozy { --row-pad-y: 10px; --card-pad: 14px; }

/* utility hide for scrollbar inside scroll containers we don't want chrome on */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* base button reset */
.btn-reset {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* keyframes */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes slide-in-right {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.9s linear infinite; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

/* code highlighting (very light) */
.tok-key { color: #C586C0; }
.tok-str { color: #CE9178; }
.tok-num { color: #B5CEA8; }
.tok-com { color: #6A9955; font-style: italic; }
.tok-fn  { color: #DCDCAA; }
.tok-typ { color: #4EC9B0; }
.tok-pun { color: #A8AEBE; }
.tok-id  { color: #9CDCFE; }

/* Auth-screen ambient animation: grid drifts diagonally; orbs float with
   a soft easing loop. Used by login.jsx _Shell. */
@keyframes grid-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 48px 48px, 48px 48px; }
}
@keyframes orb-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, 60px) scale(1.08); }
}
@keyframes orb-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-90px, -50px) scale(1.06); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}