/* ═══════════════════════════════════════════════════
   CMOVE.AI — Design Tokens v2 (ClickUp-style)
   Premium palette · Typography · Spacing · Shadows
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

:root{
  /* ─── Colors: Deep Space v2 ─── */
  --bg:#0a0e27;
  --bg2:#1a1f3a;
  --bg3:#232d4d;
  --bg4:#2d3a5c;

  --green:#00ff88;
  --green2:#00cc6a;
  --green-dim:rgba(0,255,136,0.08);
  --green-border:rgba(0,255,136,0.25);

  --blue:#0088ff;
  --blue-dim:rgba(0,136,255,0.08);

  --white:#ffffff;
  --gray1:#e0e6f0;
  --gray2:#a0aac0;
  --gray3:#707a8f;
  --gray4:#3d4a6c;

  --bord:#2d3a5c;
  --bord2:#3d4a6c;

  --red:#ff4466;
  --red-bg:rgba(255,68,102,0.08);
  --red-border:rgba(255,68,102,0.25);
  --yellow:#ffaa00;
  --yellow-bg:rgba(255,170,0,0.08);
  --yellow-border:rgba(255,170,0,0.25);

  /* ─── Gradients ─── */
  --gradient-primary:linear-gradient(135deg,#00ff88 0%,#0088ff 100%);
  --gradient-hover:linear-gradient(135deg,#00ff88 20%,#0088ff 80%);
  --gradient-card:linear-gradient(135deg,rgba(0,255,136,0.05) 0%,rgba(0,136,255,0.05) 100%);
  --gradient-card-hover:linear-gradient(135deg,rgba(0,255,136,0.1) 0%,rgba(0,136,255,0.1) 100%);

  /* ─── Pill colors ─── */
  --pill-green-bg:rgba(0,255,136,0.1);
  --pill-green-border:rgba(0,255,136,0.3);
  --pill-yellow-bg:rgba(255,170,0,0.1);
  --pill-yellow-color:#ffaa00;
  --pill-yellow-border:rgba(255,170,0,0.3);
  --pill-red-bg:rgba(255,68,102,0.1);
  --pill-red-color:#ff4466;
  --pill-red-border:rgba(255,68,102,0.3);
  --pill-orange-bg:rgba(255,136,0,0.1);
  --pill-orange-color:#ff8800;
  --pill-orange-border:rgba(255,136,0,0.3);
  --pill-blue-bg:rgba(0,136,255,0.1);
  --pill-blue-color:#0088ff;
  --pill-blue-border:rgba(0,136,255,0.3);
  --pill-white-bg:rgba(255,255,255,0.06);
  --pill-white-border:rgba(255,255,255,0.12);

  /* ─── Typography ─── */
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Fira Code','SF Mono','Cascadia Code',monospace;

  /* ─── Radius ─── */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:9999px;

  /* ─── Spacing ─── */
  --spacing-xs:4px;
  --spacing-sm:8px;
  --spacing-md:12px;
  --spacing-lg:16px;
  --spacing-xl:24px;
  --spacing-2xl:32px;
  --spacing-3xl:48px;
  --pad-lg:40px;
  --pad-md:24px;
  --pad-sm:16px;
  --gap-cards:16px;

  /* ─── Shadows & Elevation ─── */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.1);
  --shadow-md:0 4px 6px rgba(0,0,0,0.15),0 2px 4px rgba(0,0,0,0.1);
  --shadow-lg:0 10px 15px rgba(0,0,0,0.15),0 4px 6px rgba(0,0,0,0.08);
  --shadow-xl:0 20px 25px rgba(0,0,0,0.15),0 10px 10px rgba(0,0,0,0.06);
  --elevation-1:0 2px 8px rgba(0,255,136,0.1);
  --elevation-2:0 4px 12px rgba(0,255,136,0.15);
  --elevation-3:0 8px 16px rgba(0,255,136,0.2);
  --glow-green-sm:0 0 8px rgba(0,255,136,0.25);
  --glow-green-md:0 0 16px rgba(0,255,136,0.35);
}

/* ─── Shimmer Animation ─── */
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.3;}
}
@keyframes shimmer{
  0%{background-position:-1000px 0;}
  100%{background-position:1000px 0;}
}